Solved

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

Posted on 2013-01-01

Web Development

2 solutions

779 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.

Comment

Question by:marianhe

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

2 Comments

LVL 9

Assisted Solution

by:sognoct

sognoct earned 25 total points

ID: 387347742013-01-01

just
.required { background-color: yellow; }

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

LVL 83

Accepted Solution

by:Dave Baldwin

Dave Baldwin earned 25 total points

ID: 387348112013-01-01

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

Featured Post

Question has a verified solution.

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

Easy Step: How to Create Context Sensitive Help

Article by: Roayn

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) , first we need to make the file that contains all topics, which are given exclusive IDs. …

How to Market Any Industry With 4 Easy Steps

Article by: Lexie

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…