Setting an Input Box Background

Background color in input and text fields

input[type="text"], textarea {

  background-color : #d1d1d1; 

}

Hope that helps :)

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

Setting an Input Box Background

Fiddled:

<div class="input-container">
    <input type="text" value="Setting an Input Box BackgroundSetting an Input Box Backgroundaa"/>
</div>

.input-container {
    background: url(http://i.stack.imgur.com/0Vlc5.png) no-repeat;
    width:197px;
    height:28px;
}
.input-container input{
    height:28px;
    line-height:28px;/*results in nice text vertical alignment*/
    border:none;
    background:transparent;
    padding:0 10px;/*don't start input text directly from the edge*/
    width:148px;/*full width - grey on the side - 2*10px padding*/
}

If you're planning to reuse it with different widths, you should look up the sliding doors technique.

Background text in input type text

Here is how you can get a placeholder using HTML5:

<input id="textfield" name="textfield" type="text" placeholder="enter something" />

EDIT:

I no longer recommend hacking together your own polyfills as I showed below. You should use Modernizr to first detect whether a polyfill is needed in the first place, and then activate a polyfill library that fits your needs. There is a good selection of placeholder polyfills listed in the Modernizr wiki.

ORIGINAL (contd):

And here is a polyfill for compatibility:

<input id="textfield" name="textfield" type="text" value="enter something" onfocus="if (this.value == 'enter something') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter something';}">

http://jsfiddle.net/q3V4E/1/

A better shim approach is to run this script on page load, and put your placeholders in the data-placeholder attribute, so your markup looks like this:

<input id="textfield" name="textfield" type="text" data-placeholder="enter something">

and your js looks like this:

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = inputs[i].getAttribute('data-placeholder');
    inputs[i].addEventListener('focus', function() {
        if (this.value == this.getAttribute('data-placeholder')) {
            this.value = '';
        }
    });
    inputs[i].addEventListener('blur', function() {
        if (this.value == '') {
            this.value = this.getAttribute('data-placeholder');
        }
    });
}

http://jsfiddle.net/q3V4E/4/

Change Background color of input field using JavaScript

---

UPDATED 22 Jul 2020

---

Method 1:

You can use : .css()

$("#age,#phone").css("background-color","#0F0");

$("input[name='sex']").change(function() {
    if($(this).val() == "female") {
        $("#age,#phone").attr("disabled", true).css("background-color","#0F0");
    } else if($(this).val() == "male") {
        $("#age,#phone").attr("disabled", false).css("background-color","#FFF");;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

Change background color of input field using JS

There are a few issues in your code :

• your handler function declares an obj parameter as the first parameter. When an event is fired, the first element declared in the handler function is a reference to the event object.
• you're trying to react to blur or focus, but you're using onclick on your HTML tag.
• to change your element's background color, you need to modify its style object and, in this style object, the backgroundColor property (the JavaScript equivalent of the background-color CSS property).

Here's a solution involving addEventListener function. It allows you to attach the same listener to both events : blur and focus.

var element = document.getElementById("navn");element.addEventListener("focus", handler);element.addEventListener("blur", handler);
function handler(evt) {    if (evt.type == "focus")        evt.target.style.backgroundColor = "yellow"; //<--what is style?    else if (evt.type == "blur") {        evt.target.style.backgroundColor = "white";    }}

<form>   <fieldset>      <legend>Personlige oplysninger</legend>      <div>         <label for="navn">Udfyld dit fornavn:</label>         <input type="text" name="navn" class="navn" id="navn" value="" placeholder="Dit fornavn" />*         <span id="obsnavn" class="alert"></span>      </div>      <input type="button" value="Send" id="send" />   </fieldset></form>

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

---

Related Topics