Solved

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

Posted on 2013-01-01
2
762 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 82

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

706 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

16 Experts available now in Live!

Get 1:1 Help Now