2

Here's a sample of what it should look like : Select box image

I get country names from a database and generate dynamic options on page. Right now, i am showing the Html code (Not the database code). I tried lots of links to change the design (CSS), but none of them work on "select". I want to be able to change padding , border, background-color, color or border-color. Can i apply modifications to all those, for "select", using css or not ?

I also want to only show the first 5 options (first 5 country names) in the dropdown list when the button is clicked, using a scrollbar. 

#country option:first-child {
    display: none;
}

#country {
    float: left;
    width: 96%;
    color: #fff;
    font-size: 1em;
    font-family: "Calibri";
    margin-left: 5px;
    padding: 8px 0px;
    margin-top: 16px;
    border: 1px solid #00BCEA;
    padding: 9px 5px;
    width: 93%;
    border-radius: 4px;
    color: #00BCEA;
}
<select id="country">
    <option value="selectOption">Select your country</option>
    <option value="selectOption1">Select your country1</option>
    <option value="selectOption2">Select your country2</option>
    <option value="selectOption3">Select your country3</option>
    <option value="selectOption4">Select your country4</option>
    <option value="selectOption5">Select your country5</option>
    <option value="selectOption6">Select your country6</option>
    <option value="selectOption7">Select your country7</option>
</select>
ManoDestra
  • 6,325
  • 6
  • 26
  • 50
  • It's Okay, just you have an extra space after your ID! - [JSFiddle](https://jsfiddle.net/czhybqyn/) – Pedram Apr 08 '16 at 13:11
  • this 'css' work i need more 'css' for option not for select –  Apr 08 '16 at 13:18
  • 2
    Take a look at this: http://stackoverflow.com/questions/8430279/how-to-style-the-option-with-only-css – Germano Plebani Apr 08 '16 at 13:19
  • I can't use except select option. this is my requirements. –  Apr 08 '16 at 13:23
  • Are you asking "Can I apply `padding` and `border` styles to `option` in CSS"? – light Apr 08 '16 at 13:25
  • @light yes, you are right. –  Apr 08 '16 at 13:26
  • Take a look at the answer @GermanoPlebani provided above. It may provide some insights to your query. As far as I know, only Firefox allows *some* CSS on options. The other browsers ignore most CSS rules on option. – light Apr 08 '16 at 13:29
  • It means `css` not working. –  Apr 08 '16 at 13:32
  • You also asked "I also want to fixed only 5 option in drop down box". Do you mean you only want to show the first 5 options? Or the last 5? Or you only want to retrieve 5 options from DB? – light Apr 08 '16 at 13:32
  • I want show only 5 option box. You can see in image more than 10 option show. –  Apr 08 '16 at 13:34
  • I know you want to show only 5. But which 5? Option 1,2,3,4,5? Option 2693, 2694, 2695, 2696, 2697? And what happens if your DB gives you 4,437 options? Which 5 do you want? – light Apr 08 '16 at 13:36
  • first 5 show in list after that show using scrollbar –  Apr 08 '16 at 13:45
  • All these information you're providing in the comments should be in your question. – light Apr 08 '16 at 13:46
  • This jquery plugin https://select2.github.io/ maybe can help you. – Germano Plebani Apr 08 '16 at 13:56

0 Answers0