Rounded corner drop down

问题

I am trying to curve select drop down box option.

So far, I have achieved a styled effect within the drop down box itself (the box that drops down with the options) by applying certain styles to the select tag but I want to give border-radius in options.

Here is the css I have used so far any suggestion for using JS here you can suggest me:

.formRight select {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 10px #E8E8E8 inset;
    height: 40px;
    margin: 0 0 0 25px;
    padding: 10px;
    width: 110px;
}

<p class="formRight">
<span style="padding-right:100px">Lead Type: </span>

    <select id="leadType" class="box2" name="lead_type">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</p>

回答1:

You get very little control on the style of the dropdown of a native select control, and you certainly can't add rounded borders to it.

To achieve what you need you would have to use a third party dropdown plugin which replaces the select and its option elements with plain HTML, such as Select2.

回答2:

You wont be able to style the surrounding box of the options just by using css. The only way you can manage that is the create a faux select input of your own using divs and styling them as you wish.

回答3:

There are no cross-browser CSS proprieties to style <option> tag, if you want to make options corners round you should use SelectBoxIt jQuery plugin for example.

http://gregfranko.com/jquery.selectBoxIt.js/

来源：https://stackoverflow.com/questions/36032407/rounded-corner-select-drop-down

标签

javascript