如何制作带有圆角边框的选择下拉菜单?

问题描述

我正在使用下拉菜单的选择标签，使用 css 我使选择框成为圆角，通过这样做，下拉菜单保持方形，我也想转动那个圆角.

这里是现场演示

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

>

HTML

<span style="padding-right:100px">潜在客户类型:</span><select id="leadType" class="box2" name="lead_type"><option value="1">1</option><option value="2">2</option><option value="3">3</option></选择></p>

CSS

.formRight select {背景:无重复滚动 0 0 #FFFFFF；边框:1px 实心 #E5E5E5;边框半径:5px 5px 5px 5px；框阴影:0 0 10px #E8E8E8 插图；高度:40px；边距:0 0 0 25px；填充:10px；宽度:110px；}

您的帮助将不胜感激.提前致谢.

解决方案

请查看解决方案:

现场演示:https://jsfiddle.net/webx/2g5bydyo/

.selectWrapper{边框半径:36px；显示:内联块；溢出:隐藏；背景:#cccccc;边框:1px 实心 #cccccc;}.selectBox{宽度:140px；高度:40px；边框:0px;大纲:无；}

<select class="selectBox"><option>选项1</option><option>选项2</option><option>选项3</option><option>选项 4</option></选择>

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.

解决方案

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>

这篇关于如何制作带有圆角边框的选择下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！