Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-01-01
2
Medium Priority
?
808 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 75 total points
ID: 38734774
just
.required { background-color: yellow; }

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

Accepted Solution

by:
Dave Baldwin earned 75 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

916 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