Background Color in Input and Text Fields

Background color in input and text fields

input[type="text"], textarea {

  background-color : #d1d1d1; 

}

Edit: working example, http://jsfiddle.net/C5WxK/

How to get different background color for different input fields

No need for multiple classes. Use the :nth-child() Selector

#data tr:nth-child(odd) and #data tr:nth-child(even)

#data tr:nth-child(odd) input {

  background-color : red; 

}

#data tr:nth-child(even) input {

  background-color : blue; 

}

<table id = "data">

<tbody>

<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>

</tbody>

How can I change the background color of input fields of text type when entering invalid values?

Here is an example to validate an email:

HTML

<input type="email" required/>

CSS

input:invalid {
    background-color: #FFAAAA;
}

input:valid {
    background-color: #AAFFAA;
}

You can use simple HTML to validate all these data types:

tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color

Example Fiddle

I cant change background color of input

Please see this example for styling inputs. You will have to write input[type=text] in your CSS or SASS.

input[type=text] {
  background-color: darkblue;
  color: white;
}

<input type="text" placeholder="text">

How to change the input field background color right after I type something?

I'm not sure all your code does what you are expecting, but I have an approach that is approaching your requirement by listening to the keyup event and evaluating if the input has content or not; you should be able to reconfigure this to your use case.

I also moved your loop of the four loops inside the submit button click handler-- otherwise you are adding three identical handlers to the button.

const submitButton = document.getElementById("submit")
const inputField = document.querySelectorAll(".input")

submitButton.addEventListener("click", function(e) {
  inputField.forEach(function(item) {
    e.preventDefault();
    if (item.value == '') {
      item.classList.add("red");
      item.nextElementSibling.classList.add("red");

    } else {
      item.classList.add("green")
      item.nextElementSibling.classList.remove("green");
    }
  })
})

inputField.forEach(function (item) {
  item.addEventListener('keyup', function(e) {
    const theInput = e.target;
    if (theInput.value) {
      theInput.classList.remove('red');
      theInput.classList.add('green');
    }
  });
});

.red {
  border: red 2px solid;
}

.green {
  border: green 2px solid;
}

<label for="myfield">My Field:</label>
<input class="input" id="myfield" name="myfield" />
<br/>
<label for="myotherfield">My Other Field:</label>
<input class="input" id="myotherfield" name="myotherfield" />

<button id="submit">Submit</button>

How to change the background color of an input field when text is entered?

If both of these fields are required, here's a much simpler solution using CSS only.

Add the attribute required to your <input> tags and then use the pseudo-class :valid.

.form-control:valid {
  background-color: #00FF7F;
}

---

Code snippet:

#loginbox {  width: 400px;  height: 200px;  margin-left: auto;  margin-right: auto;  margin-top: 25%;}.logindata {  margin-left: auto;  margin-right: auto;  margin-top: 20px;  height: 60px;  width: 290px;  transition: 0.25s ease;}.form-control {  margin-left: auto;  margin-right: auto;  height: 55px;  width: 288px;  border-style: none;  background-color: transparent;  text-align: center;  border: solid 2px #00FF7F;  transition: 0.25s ease;  font-size: 25px;  font-family: "Trebuchet MS";}.form-control:hover {  box-shadow: 0px 0px 30px #2E8B57;}::-webkit-input-placeholder {  color: #00FF7F;}.form-control:valid {  background-color: #00FF7F;}

<div id="loginbox">  <div class="logindata" id="logindata1">    <input type="text" class="form-control" placeholder="Username" required>  </div>
  <div class="logindata" id="logindata2">    <input type="password" class="form-control" placeholder="Password" required>  </div></div>

Is it possible to give a background color to a text field in a form?

As I can understand from your given image. You need to give fieldset and first two fields should be under <div> tag and then you can set style="background-color:black;"

for example:

<form action="demo_form.asp" style="color:green;">
    <fieldset><legend> Personal Details </legend>
    <div style="background-color:black">
First Name: <br>
<input type="text" name="fname" placeholder="Enter First Name"><br>
Last Name: <br>
<input type="text" name="lname" placeholder="Enter Last Name">
    </div>
Date Of Birth: <br>
    <input type="text" name="dob" placeholder="mm / dd / yy"><br>
        </fieldset>
</form> 

JSFiddel I hope it satisfied your requirement. If it is then up vote for this ans.

---

Related Topics