Solved

HTML 4 & CSS 3: required input needs custom background-color

Posted on 2013-01-01
2
764 Views
Last Modified: 2013-11-19
I need to change background color of required inputs in a form.

Following code doesn't work:

CSS
input[type="text"] .required { background-color: yellow; }

Open in new window

or CSS:
input .required { background-color: yellow; }

Open in new window

HTML:
<input class="required" type="text" id="email" name="email">

Open in new window


Tested in browsers FF 17.0.1 and IE 9 with latest patches.
Only HTML 4 and CSS 3 is acceptable.
0
Comment
Question by:marianhe
2 Comments
 
LVL 9

Assisted Solution

by:sognoct
sognoct earned 25 total points
ID: 38734774
just
.required { background-color: yellow; }

or you can also write :
#email { background-color: yellow; }
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 25 total points
ID: 38734811
Several variations work fine but 'input .required' with a space in the middle didn't.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>CSS Input BG</title>
<style type="text/css">
<!-- 
input.required { background-color: yellow; }
.required2 { background-color: blue; }
#email3 { background-color: green; }   
-->
</style>
</head>
<body>
<h1>CSS Input BG</h1>

<form action="">
<input class="required" type="text" id="email" name="email"><br>
<input class="required2" type="text" id="email2" name="email2"><br>
<input class="required3" type="text" id="email3" name="email3"><br>
<input type="submit" value="Submit" />
</form>

</body>
</html>

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Summernote and form validation 10 97
Connect MySql database to wordpress site 3 53
Adding a hidden div to each row in a table 6 61
contractual requirements for app hosting 3 79
Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Accessibility and Usability are two concepts that seem to be closely related.  But, too many people seem to have a distorted perception of them. During last five years, those two words have come to the day-to-day work of almost every web develope…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now