发表新帖
发表新帖

Removing rounded corners from a <select> element in Chrome/Webkit

后端 未结
关注
15 1747
天命终不由人
天命终不由人 2020-12-07 09:06

The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a

提交评论
  •  加载中...
  • 甜味超标
    2020-12-07 09:40

    While the top answer removes the border, it also removes the arrow which makes it extremely difficult if not impossible for the user to identify the element as a select.

    My solution was to just stick a white div (with border-radius:0px) behind the select. Set its position to absolute, its height to the height of the select, and you should be good to go!

    0 讨论(0)
  • 一向
    2020-12-07 09:41

    I used jordan314's solution, but then I added "border-light" class to select. If you have default border-light class defined in css, you can directly use it. It just defines the border as white). I changed the border to square/remove the radius, and maintained the arrow.

    Here is what I did:

    <select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

    if you don't have the predefined border-light, just add in your css:

    <style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ffffd;
   background-color:white;
 }
</style>
    0 讨论(0)
  • 一整个雨季
    2020-12-07 09:43

    Eliminating the arrows should be avoided. A solution that preserves the dropdown arrows is to first remove styles from the dropdown:

    .myDropdown {
  background-color: #yourbg;
  border-style: none;
}

    Then create div directly before the dropdown in your HTML:

    <div class="myDiv"></div>
<select class="myDropdown...">...</select>

    And style the div like this:

    .myDiv {
  background-color: #yourbg;
  border-style: none;
  position: absolute;
  display: inline;
  border: 1px solid #acolor;
}

    Display inline will keep the div from going to a new line, position absolute removes it from the flow of the page. The end result is a nice clean underline you can style as you'd like, and your dropdown still behaves as the user would expect.

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-07 09:44

    Following is the way to do it;

    1. Create a background image that looks like a dropdown.
    2. Switch off browser appearance
    3. Align the background image on the select component
      .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("<your image>");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }
    0 讨论(0)
  • 旧时难觅i
    2020-12-07 09:46

    For some reason it's actually affected by the color of the border??? When you use the standard color the corners stay rounded but if you change the color even slightly the rounding goes away.

    select.regularcolor {
    border-color: rgb(169, 169, 169);
}

select.offcolor {
    border-color: rgb(170, 170, 170);
}

    https://jsfiddle.net/hLg70o70/2/

    0 讨论(0)
    • 1 2 3 下一页
     看不清?
    提交回复
    热议问题