16

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

这是现场演示

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

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

4

5 回答 5

20

请检查解决方案：

现场演示：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>

于 2016-11-29T10:48:35.077 回答
10

这是我的解决方案。

CSS

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

HTML

<select class="selectBox">
.............
</select>
于 2015-12-09T10:36:27.843 回答
6

Ankur，下拉列表由用户操作系统控制，因此这些元素的完整样式是不可能的。要获得您想要的外观，您不妨考虑开发或使用第三方自定义下拉列表。

看着你的小提琴；Hugo Giraidel 的Demo 5可能会为您提供所需的内容。

下拉列表

基本上它使用 HTML<li>元素，然后使用 JS/jQuery 创建带有几个基本过渡效果的下拉列表效果。

于 2013-10-18T11:57:17.043 回答
1

你看过这个 Stackoverflow 帖子吗？
CSS - 使用 SELECT 标签时下拉框的边框半径？不是 SELECT 输入本身，实际的下拉框？
因为你问的是不可能的（或者至少不是跨浏览器兼容的）

为了使其工作并使其跨浏览器兼容，您必须使用 DIV 元素（或任何非表单元素）创建下拉/选择，并使用 JS/jQuery 将其值更新为隐藏选择。这样你就可以不受限制地以你想要的方式设置 DIV 的样式。

这可能会对您有所帮助：
JQuery Auto Complete 替代 Select Drop Down

于 2013-10-18T08:07:02.047 回答
0

我现在不知道为什么，但是在删除选择默认箭头时它可以工作

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;
}
于 2020-02-10T08:19:15.023 回答