...

View Full Version : style input box



nikko50
12-27-2006, 08:28 PM
How can I style input boxes with this style="border:1px solid #808080;"? I tried the below in my style sheet but it does not work.

input {
background-color: #FFFFFF;
border: 1 solid #808080 ;
font-size: 8pt;
font-weight: normal;
font-color: black;
}

robojob
12-27-2006, 08:42 PM
try putting this in your css


.input-box
{
color: #000;
background: #fff;
border: #808080 solid 1px
}

and create your input boxes with a class id of input-box eg <input type="text" name="name" class="input-box">

ikilledsanta
12-27-2006, 09:02 PM
Your problem is you didn't specify px in your CSS. I do the same thing a lot, it bothers me.


input {
background-color: #FFFFFF;
border: 1px solid #808080;
font-size: 8pt;
font-weight: normal;
font-color: black;
}

That should work.

nikko50
12-27-2006, 09:12 PM
Yes it works now! One last question. With the submit buttons when it has focus the borders go bold. How can I get the submit boxes to not do that.

ikilledsanta
12-27-2006, 09:25 PM
Well, I think this would do what you want:


input:hover {
border: 1px solid #808080;
}
input:focus {
border: 1px solid #808080;
}

nikko50
12-27-2006, 09:42 PM
Did'nt seem to work:(

ikilledsanta
12-27-2006, 09:59 PM
Oops, I forgot :active.

input:hover {
border: 1px solid #808080;
}
input:focus {
border: 1px solid #808080;
}
input:active {
border: 1px solid #808080;
}


I'm not quite sure what you mean by "bold". The code I gave you will make it so that when you hover, click, or press and move away from the button, it will not change at all. This is kinda scary for users because they don't know if it worked when they clicked it, so I wouldn't recommend using the code I pasted.

VIPStephan
12-27-2006, 10:32 PM
Do you mean the dotted outline on focus?

input {outline: none;}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum