Jump to content

Form Style


NolanDubyu

Recommended Posts

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!

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.