Changing input background color depending on the input in PHP

Question

I am having trouble with the changing background color of input fields. If it is empty or already in use or the some another rule that I defined, the background color should change. Juts I need an example on simple form like:

<form name="login" action="" method="post">
Username: <input type="text" name="username"><br />
<input type="submit" name="submit" value="Submit">
</form>

I want to use PHP and CSS codes for to do that. Feel free to use div classes and other stuff.

Thanks

I would recommend to use jquery to do this, php is not so dynamic as jquery, try with focus, blur, onchange, onkeyup, etc. — Dario
– Dario, Commented Aug 23, 2014 at 21:22

Tyler Marien · Accepted Answer · 2014-08-23 21:36:01Z

1

You can do this with CSS3 attribute selectors. For example, if you wanted the background to be red if the input is empty or green otherwise.

input { background: green; }
input[value=""] { background: red; }

Note that CSS3 attribute selectors are not fully compatible with IE8 and lower. All other modern browsers will support them.

Also if you want it to update dynamically (ie. change from red to green when the user enters something into the input box) you would have to use Javascript.

edited Aug 23, 2014 at 21:36

answered Aug 23, 2014 at 21:30

Tyler Marien

7624 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arda Özceviz Over a year ago

What if the user name is already registered ? Field is not empty but the username is already in use.

Tyler Marien Over a year ago

There are numerous options to be do that. The general flow would be submit your form, check the database for duplicates, if there are duplicates then output some error messages and the form again with css classes on the input fields. You should try it first, then post your code so people can give you more specific advice.

King Loui · Accepted Answer · 2014-08-23 21:36:36Z

0

i wrote you a litte example

css

.placeholder {color:#aaa;}
input[type=text],
input[type=password] {
    background:#eee;
}
input[type=text]:focus,
input[type=password]:focus {
    background:#fff;
}

js

$("#username").focus(function(){
    if($(this).val() == "Benutzername")
    {
        $(this).val("");
        $(this).removeClass('placeholder');
    }
});
$("#username").blur(function(){
    if($(this).val() == "")
    {
        $(this).val("Benutzername");
        $(this).addClass('placeholder');
    }
});

$("#password").focus(function(){
    if($(this).val() == "Passwort")
    {
        $(this).val("");
        $(this).prop("type", "password");
        $(this).removeClass('placeholder');
    }
});
$("#password").blur(function(){
    if($(this).val() == "")
    {
        $(this).val("Passwort");
        $(this).prop("type", "text");
        $(this).addClass('placeholder');
    }
});

html

<input id="username" type="text" class="placeholder" value="Benutzername" /><br />
<input id="password" type="text" class="placeholder" value="Passwort" />

Check it out in JSFiddle http://jsfiddle.net/hk8k4vew/

answered Aug 23, 2014 at 21:36

King Loui

2001 silver badge9 bronze badges

2 Comments

Arda Özceviz Over a year ago

Its java script. I want only PHP and CSS as I wrote the question.

King Loui Over a year ago

then you have to add classes to the inputs with PHP

Collectives™ on Stack Overflow

Changing input background color depending on the input in PHP

2 Answers 2

2 Comments

css

js

html

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

css

js

html

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related