CODEWITHSUNDEEP
htmlcssselect
Ankur Dhanuka
Ankur Dhanuka

Reputation: 1237

how to make select dropdown with rounded border?

i am using select tag for dropdown menu, using css i made select box to be rounded corner, by doing this drop down menu remains square, i also want to turn that rounded corner.

here is the live demo

http://jsfiddle.net/ankurdhanuka/AwUHn/1/

HTML

<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>

CSS

.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;
}

Your Help will be appreciated. Thanks in advance.

Upvotes: 19

Views: 140181

Answers (6)

JSG
JSG

Reputation: 430

Try outline: none; then add your border stuff... As a mater of a fact use desired_parameter: none; for every parameter you want to change then change it

select {
        outline: none;
        background-color: none;
        background-color: rgba(244,241,229,1.00);
        font-weight: 500;
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 3px 0px;
        border: none;
        border: 1px solid #DDDDDD;
        border-radius: 4px;
}

Upvotes: 0

Maksym Shemet
Maksym Shemet

Reputation: 21

I don't now why, but it works when remove select default arrows

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

select::-ms-expand {
  /* For IE10 */
  display: none;
}

select {
  border-radius: 20px;
  width: 100px;
  height: 40px;
  padding-right: 10px;
  padding-left: 10px;
}

Upvotes: 0

webx
webx

Reputation: 985

Please check the solution :

Live demo : https://jsfiddle.net/webx/2g5bydyo/

.selectWrapper{
  border-radius:36px;
  display:inline-block;
  overflow:hidden;
  background:#cccccc;
  border:1px solid #cccccc;
}
.selectBox{
  width:140px;
  height:40px;
  border:0px;
  outline:none;
}
<div class="selectWrapper">
  <select class="selectBox">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>
</div>

Upvotes: 21

John
John

Reputation: 529

This is my solution.

CSS

.selectBox{border-radius:4px;border:1px solid #AAAAAA;}

HTML

<select class="selectBox">
.............
</select>

Upvotes: 12

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

Reputation: 2804

Ankur, drop-down lists are controlled by the users operating system so full styling of these elements aren't possible. To achieve the look you desire you may wish to consider developing, or using a third-party custom drop-down list.

From looking at your fiddle; Demo 5 by Hugo Giraidel may provide you with with what you're looking for.

Dropdown List

Basically it uses HTML <li> elements and then using JS/jQuery it creates the drop-down list effect with a couple of basic transition effects.

Upvotes: 6

Sander
Sander

Reputation: 233

Have you looked at this Stackoverflow post?
CSS - Border Radius for the drop down box when using the SELECT tag? Not the SELECT input ittself, the actual drop down box?
Because what you are asking is not possible (or at leat not cross-browser compatible)

To make it work AND make it cross-browser compatible, you would have to create an dropdown/select with DIV elements (or any non form elements) and update their values with JS/jQuery to a hidden select. That way you can style the DIV the way you want without limitations.

This may help you out:
JQuery Auto Complete substitute for Select Drop Down

Upvotes: 2

Related Questions