PDA

View Full Version : style="inputbox"...Please help!!



nickbarresi
Jan 20th, 2003, 11:43 AM
Hi there, I'm working on a huge site, and I noticed the original coder added style="inputbox" to all text boxes, although there is no style for it currently defined.

Can you guys show me an example of a CSS script that would automatically change all the input boxes?

I want them to look like the input boxes on these forums when you log in :)

Thanks in advance!

bfsog
Jan 20th, 2003, 01:10 PM
<form>
<input type="text" name="blah" style="BORDER-TOP-WIDTH: 1px; FONT-WEIGHT: normal; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 10px; BORDER-LEFT-COLOR: #ffffff; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #ffffff; COLOR: #000000; BORDER-TOP-COLOR: #ffffff; TEXT-INDENT: 2px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #99DDFF; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #ffffff">
</form>

some of the style stuff can be deleted, the borders and such. It isnt the same color as the one you asked for, but you can easily change it to suit you

hope this helps you?

ronaldb66
Jan 20th, 2003, 01:23 PM
Nick,

if you want to assign the same styles to all input elements, you'd be better of assigning this to the input element itself:

input {background-color: #cccccc;
...whatever styles ...;
}
The inline style shown before would only cover that one input, making it necessary to add it to all inputs that need to be styled that way.
Am i still making sense, or is the after lunch dip kicking in...?

nickbarresi
Jan 20th, 2003, 02:57 PM
Thanks for the replies guys, I think I goofed up though, it says class="inputbox"

So I'm thinking there is something I can add to the head like:

inputbox {
css etc
}

and then have it work, but I'm not that good at CSS, so I may not be making any sense:(

redhead
Jan 20th, 2003, 05:24 PM
ah, style="inputbox" and class="inputbox" have completely differant results ;)

you can use this in the <head> section:

.inputbox {
...
}

cg9com
Jan 20th, 2003, 05:28 PM
style being the inline CSS instruction and class refering to external/seperate CSS

class would require seperate CSS like redhead said
<style>
.blah {color:red}
</style>
class="blah"

or

style="color:red;"

2 options there, understand? notice the period before blah, this specifies a custom CSS variable instead of element styling.
for example this:
<style>
img {border:1px}
</style>

places a 1 pixel width border on all <img> tags, whereas the period before "img" would allow you to customize only when you specify with class=""

nickbarresi
Jan 20th, 2003, 05:41 PM
You guys are awesome, thanks very much!

nickbarresi
Jan 20th, 2003, 06:16 PM
Ok i did this:

.inputbox {
border: 1px black;
background-color: #F0F0F0;
text-size: 12px;
}

The results did not show any black border, only the grey background. Also, some of the existing values were extending past the box :(

I.E: Phone number showed 501-555-555 and cut off last number. (Was fine before)

Any help would be great!

cg9com
Jan 20th, 2003, 06:53 PM
.inputbox {
border: 1px #000000;
background-color: #F0F0F0;
font: 12px;
}
<input class="inputbox">

if its cutting it off, its maybe because of the size?
there is an attribute to adjust, or you can use CSS
<input size="20"> 20 is default size, it equals out to 155px i think.


was fine before

when you change the font size, you also change the form element.

ronaldb66
Jan 21st, 2003, 09:59 AM
Nick,

add a border-style:


.inputbox {
border: 1px black solid;
background-color: #F0F0F0;
text-size: 12px;
}
I experienced omitting a border-style results in no border.

top500
Jan 21st, 2003, 11:32 AM
erm ok i tried all that, but if you look at my site, the selector box will NOT comply.
Anyway, the css file sez:

textarea {
color: yellow; border: 1px yellow solid; background-color: black
}
select {
color: yellow; border: 1px yellow solid; background-color: black
}
input {
color: yellow; border: 1px yellow solid; background-color: black
}

But look at the 'Select Engine' box, it's normal border... here: http://atopqualitysite.com/
wassup wid dat?
thanks in advance for your time,
Pascal