Member Avatar for LogicWeb

Trying to apply some CSS to the select options in the drop down menu. The line-height or height variables are not kicking in on the <options> variables.

I'm using this:

<style>
.styled-select select {
   background: #E4E6F5;
   width: 300px;
   padding: 8px;
   font-size: 16px;
   border: 1px solid #E4E6F5;
   height: 42px;
}
select.select{
    position:relative;
    z-index:10;
    height:38px !important;
    line-height:38px;
}
span.select{
    position:absolute;
    bottom:0;
    float:left;
    left:0;
    height:38px;
    line-height:38px;
    margin-left:15px;
}
</style>

HTML code:

<div class="styled-select" style="float:right">
<select class="select">
<option>I am a....</option>
<option>Option #1 Test</option>
<option>Option #2 Test</option>
<option>Option #2 Test</option>
<option>Option #2 Test</option>
<option>Option #2 Test</option>
</select>
</div>
<span class="intro">Hello!</span><br />
<span class="register"> If this is your first visit, be sure to
        check out the <a href="faq.php{sessionurl_q}" target="_blank"><b>FAQ</b></a>. You will need to <a href="register.php{sessionurl_q}" target="_blank"><b>register</b></a>
        before you can post: click the register link to proceed. To start viewing messages,
        select the forum that you want to visit from the selection below.
</span>
  • 3 Contributors
  • 2 Replies
  • 6K Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by JameB
Member Avatar for JorgeM

Hmm.. Dont think there is a way via CSS to apply a line height style directly to option elements.

Member Avatar for JameB 
<!DOCTYPE html>
<html>
<body>

<select style="line-height:38px; padding: 20px; color: red; height: 20px; font-size: 30px; ">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>
</body>
</html>

Run that code on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option and compare to what you're doing wrong...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.