CODEWITHSUNDEEP
htmlcssformsinputfocus
Lemex
Lemex

Reputation: 3804

CSS Forms/Input Maniuplation

input:required{
    background-color:#f00;
}

input:required label{
   color: #FF3434;
}

I have the above CSS code currently for my form,

I want to be able to make the label red when the field is required. My input field is:

<label for="frmComTelephone">Telephone</label>  
<input type="number" name="Telephone" id="frmComTelephone"/>

<label for="frmIn1IncinTime">Time</label>   
<input type="text" name="Incident Time" id="frmIn1IncinTime" required="required"/><br>

But that CSS isn't working how do I solve this?

2ND problem is I have the following CSS:

input:focus 
{ 
    background-color:yellow;
}

input[type="text"], input[type="date"],input[type="time"],input[type="number"],textarea,select
{
border-radius:5px;
border-width: 1px;
border-style: solid;
border-color: #C6C6C6; 
height:41px;
background-color: #FF3434;
width: 100%;

}

But when the item is focused it doesn't change to yellow, if i remove "background-color: #FF3434;" it turns yellow on focus?

Is what I am doing not able to be done? Or am I going about this wrong?

Thanks

Upvotes: 0

Views: 501

Answers (3)

pixelistik
pixelistik

Reputation: 7830

Problem 2:

CSS selectors by attribute, like input[type="number"] and pseudo-elements like :focus have equal specifity. This means that your input:focus rule gets overridden by the following input[type="number"] background.

There are two ways to fix this:

Higher specifity in the first selector: 
form input:focus 
{ 
    background-color:yellow;
}

input[type="text"]
{
    background-color: #FF3434;
}
Better: Correct rule order, more important one comes second 
input[type="text"]
{
    background-color: #FF3434;
}

form input:focus 
{ 
    background-color:yellow;
}

CSS specifity seems hard, but it's worth understanding it properly. There are a lot of resources about it, try this introduction: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Upvotes: 1

Zoltan Toth
Zoltan Toth

Reputation: 47687

Issue 1:

input:required label{
   color: #FF3434;
}

This won't work because the label is not a child of the input. They're siblings. To solve that you have to create a class and attach it to your label:

label.required { color: #FF3434; }
<label for="frmComTelephone" class="required">Telephone</label>

Issue 2:

Try this:

input:focus,
textarea:focus,
select:focus
{ background-color: yellow !important; }

...

UPDATE

If you're more comfortable without using !important then try this:

input[type="text"]:focus, 
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus
{ background-color: yellow }

OR

if you have an id on your form this will also work

#formID input:focus,
#formID textarea:focus,
#formID select:focus
{ background-color: yellow }

Upvotes: 1

gherkins
gherkins

Reputation: 14985

You need to put the input:focus rule behind the input[type="number"] rule or use input[type="number"]:focus.

Otherwise its overwritten by input[type="number"] as it's more specific.

Upvotes: 1

Related Questions