Change Bootstrap's select border-radius

0
votes

I am not able to change the border-radius for the select elements in Bootstrap 3. I tried changing some other attributes like background-color or border-color, those worked for me. The only style that doesn't work is the border-radius. I don't know what I'm doing wrong.

HTML:

<div class="container">
    <form role="form" class="form-horizontal" method="get" action="<?php $_SERVER['PHP_SELF']; ?>">
        <div class="form-group">
            <div class="col-md-6 col-md-offset-3">
                <div class="input-group">
                    <input type="text" class="form-control search-box" placeholder="Search">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-search"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-6 col-md-offset-3">
                <div class="col-md-6">
                    <select class="form-control"></select>
                </div>
                <div class="col-md-6">
                    <select class="form-control"></select>
                </div>
            </div>
        </div>
    </form>
</div>

CSS:

body {
    padding: 0;
    margin: 0;
}

.form-horizontal {
    margin-top: 50px;
}

/* Remove border-radius, box-shadow, border-right and transition of input box */
.search-box {
    border-radius: 0px;
    box-shadow: none !important;
    border-right: none;
    transition: none;
    font-size: 16px;
}

/* Remove addon border-radius to match input border-radius */
.input-group-addon {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #fff;
}

/* Change addon border-color to the same color as the input box when input:focus */
.search-box:focus, .search-box:focus + span {
    border-color: #3498db;
}

/* Trying to change border-radius on the select element, not working... */
select {
    box-shadow: none !important;
    transition: none !important;
    border-radius: 0px !important;
}
2
htmlcsstwitter-bootstrap
its working in chrome, firefox and ie. jsfiddle.net/codeandcloud/jUdLn maybe there is some additional info you are missing? – naveen
I want the select to have no corner, like the search-box. It shows the select's border-radius on the link you provided. – phre
Try .input-group select { border-radius: 0px !important;} i think this can solve your problem. – J Prakash
select { -webkit-appearance: none; -webkit-border-radius: 0px; } – jme11
That's fine, except the text in my select box is now cut off. How can I add spacing to the text itself? – iamryandrake

2 Answers

6
votes

Add this to your CSS. However it will remove the nice arrows shown in Chrome:

select.form-control {
  -webkit-appearance: none;
}

You might want to add -webkit-border-radius: 0px;.

Also see Bootstrap issue #15588.

3
votes

You can try this:

select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='18' viewBox='0 0 24 24'><path fill='grey' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>") #fff;
  background-position: 98% 50%;
  background-repeat: no-repeat;
}

tested in chrome, firefox and safari.