CSS: Customizing <SELECT> box

[BirdieNamNam]

Dear friends!

A use a class like this

  .StdNumInput
  {
  width: 50pt;
  background-color: #fffedf;
  border-style: solid;
  border-color: #9999ff;
  }

to be used at input fields, for example a text field.

  <INPUT TYPE=&quot;text&quot; CLASS=&quot;StdNumInput&quot;>

But I also want select boxes to look the same.

  <SELECT CLASS=&quot;StdNumInput>
    <OPTION>Blah-blah</OPTION>
    ...

Can I do this, the properties in my class does not work on a select box?

Best regards, Sebastian.

 

[ChrisHunt]

I've not tested it, but you could try adding this:
[tt]
select.StdNumInput option
{
background-color: #fffedf;
}
[/tt]

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[BirdieNamNam]

Okey, that works for the option rows.

But my main topic here is to change the appearence of the border around the SELECT box, to make it look the same as my textboxes.

Thanks anyway, Sebastian.

 

[Vragabond]

Can't do that. Select boxes are OS dependant and as such cannot be changed. If you wish to have a special looking select box, you will need to make one out of javascript.

 

[BirdieNamNam]

OK, thank you Vragabond!

Can you give me any nice place where I can find an easy way to program this kind of things, some tutorial, I would apriciate it!

/Sebastian.

 

[Vragabond]

Here's a tutorial for that:

http://webfx.eae.net/dhtml/select/jsGenerated.html

 

[BillyRayPreachersSon]

>> Can't do that. Select boxes are OS dependant and as such cannot be changed

Borders can be changed around select boxes, just that some browsers choose not to render the border (IE/Win, for example). Other browsers will render the border.

You will also find that (on most browsers), the width of the select box cannot be set. It is almost always determinted by the width of the widest option.

Hope this helps,
Dan

 

[BirdieNamNam]

Yes, thanks it helps to know the limitations.

/Sebastian.

 

[lebisol]

paddin or W & H of the "box" (not the form's but the CSS's)arround the form element doesnt help?
what is the "select box" in your mind?
sounds like ur talking about LIST/MENU no boxes here
consider this as well:

<select name="select">
  <option selected>THIS (the longest) label decies on the width....and font size will definelty change me</option>
  <option value="1">1 this lable is shorter</option>
  <option value="2">2 and does nothing</option>
  <option value="3">3 to the 'width'</option>
</select><br>
<select name="select_2">
  <option value="dashes(characters) are valid  way of controlling the size" selected>----------- 
  select one -------------</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

HTH
All the best!

> need more info?
:: don't click HERE ::

 

[BirdieNamNam]

Hi Lebisol!

Thanks for your answer. Really, my main concern is to make the SELECT box look as much like a text input field, with altered line types, colors and background. I've learned that there is no easy (read "HTML/CSS") way to do this, s I'll jump it for now. Thanks anyway!

/Sebastian.

 

[lebisol]

Hi BirdieNamNam!
have u considered using JS to perhaps represent slect box with an image? or is this out of limits?
the only other thing I can think of would be playing with paddin of .class assigned to the box...but ur right for the most part u get no love with boxes.
If u dont mind using JS then something in line of "onCLick=swap image and set value to="xyz"
Good Luck!

> need more info?
:: don't click HERE ::

 

[BirdieNamNam]

Thanks again, Lebisol! I know that I can do really anything I want with JS, and that may be the way to do it in the future. The thing is, right now, the people that shall maintain the application has no or little JavaScript knowledge. So what I was after was an easy, straightforward way to make the pages look nices. However, this is not a main problem of the application, so for now and on I can live with the standard looks of the input fields in IE. Maybe that will change in the future, but for now - I'm satisfyed. Thanks for all yor efforts.

/Sebastian.