Form Style

[NolanDubyu]

I have never tried to style a form with hidden attributes, but for the life of me I cannot figure this out. I have tried adding a class, etc. to the hidden inputs, but still nothing. Any form of style I add

seems to just effect the outer parameters of the actual form.

 

 

 

 

<form id="search" name="search" form method="get" action="find_search.php">

 

<input type= "text" name= "q" value="" />

<input type="hidden" name= "cat" value="" />

<input type="hidden" name= "time" value="0" />

<input type="hidden" name="letter" value="" />

<input type="hidden" name="offset" value="0" />

<input type="hidden" name= "type" value="quick" />

<input type="submit" value="Search" />

 

</form>

 

 

 

#search {

width:50%;

padding:10px;

outline:none;

height:36px;

}

 

.focusField {

border:solid 2px #73A6FF;

background:#EFF5FF;

color:#000;

}

 

.idleField{

background:#EEE;

color:#6F6F6F;

border: solid 2px #DFDFDF;

}

 

 

Thanks in advance!

[Psycho]

Hidden fields are "hidden" - i.e. they are not shown. Therefore you can't style them. They never get focus either. What you are asking makes no sense. If you want a field that is displayed, but not editable - then you don't want to use a hidden field.

[NolanDubyu]

I don't want to style the hidden attributes, I believe it's the hidden attributes that are stopping my "text" input from being styled.

[Psycho]

No, that would not be the case.

 

In the bits of code above you have not applied any styles to the input fields. So, I must assume you are trying to apply those styles through Javascript. You do have one class, "search", which is applied to the form element - and that makes no sense. The "form" is not a visual element that is displayed. If you mean for those properties to be applied to the INPUT elements of the form - then you need to specify that.

 

#search input
{
   width:50%;
  padding:10px;
  outline:none;
  height:36px;
}