Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to make a text box look different from my input fields

I made a simple website that takes in two arugments and gives the output of the third. To style the inputs, I used input styling on text inputs. However, my result is also in a text field and looks exactly like an input (which to html it is). I think there is a better way. Here are my text fields

<label for "messageBox"> Message: </label>
<input type="text" id="messageBox" placeholder="This is the message">
<br>
<label for "keyBox"> Key: </label>
<input type="number" id="keyBox" placeholder="This is the key">
<br>
<input type="submit" value = "Encrypt" id="encrypt" >
<input type="submit" value = "Decrypt" id="decrypt" >

<br>
<input type="text" id="resultBox" placeholder="Lambda result will appear here" readonly>

The CSS is:

input {
        padding: 10px;
        width: 800px;
        margin: 10px;
    }
Tags:

2

Answers


  1. 0

    You can add to the class list of the input using class="styled-input" and then add additional css for .styled-input class
    In this example, using your supplied code, the result box is colored red now.

    input {
  padding: 10px;
  width: 800px;
  margin: 10px;
}

.styled-input {
  background-color: red;
}
    <label for "messageBox"> Message: </label>
<input type="text" id="messageBox" placeholder="This is the message">
<br>
<label for "keyBox"> Key: </label>
<input type="number" id="keyBox" placeholder="This is the key">
<br>
<input type="submit" value = "Encrypt" id="encrypt" >
<input type="submit" value = "Decrypt" id="decrypt" >

<br>
<input type="text" class="styled-input" id="resultBox" placeholder="Lambda result will appear here" readonly>

    You already have a unique id assigned to your result box, that could be used as well, instead of adding a class name.

    input {
  padding: 10px;
  width: 800px;
  margin: 10px;
}

#resultBox {
  background-color: red;
}
    <label for "messageBox"> Message: </label>
<input type="text" id="messageBox" placeholder="This is the message">
<br>
<label for "keyBox"> Key: </label>
<input type="number" id="keyBox" placeholder="This is the key">
<br>
<input type="submit" value = "Encrypt" id="encrypt" >
<input type="submit" value = "Decrypt" id="decrypt" >

<br>
<input type="text" id="resultBox" placeholder="Lambda result will appear here" readonly>
    Login or Signup to reply.
  2. 0

    You can add a class "result-box" to the HTML and add the following styles to remove the default HTML input styling. The :focus selector is to help remove the blue border from the input on focus.

    <input type="text" class="result-box" id="resultBox" placeholder="Lambda result will appear here" readonly>

.result-box {
    border: none;
    background-color: transparent;
    cursor: default
}
.result-box:focus {
    outline: none
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search