Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2013-01-01
2
Medium Priority
?
810 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
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
Course of the Month12 days, 3 hours left to enroll

564 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