CSS - 使用 SELECT 标签时下拉框的边框半径？不是 SELECT 输入本身，而是实际的下拉框？

发布于 2024-12-27 20:57:44 字数 1978 浏览 0 评论 0原文

我正在尝试设计一个选择下拉框的样式。

到目前为止，我已经通过将某些样式应用于选择标签，在下拉框本身（带有选项的下拉框）中实现了样式效果。

这是我到目前为止使用的 css：

input, select {
    background: #fcfcfc;
    padding: 7px 25px;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6a6f75;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-background-clip: padding-box;
    -webkit-transition: all 0.7s ease-out 0s;  /* Saf3.2+, Chrome */
    -moz-transition: all 0.7s ease-out 0s;  /* FF4+ */
    -ms-transition: all 0.7s ease-out 0s;  /* IE10? */
    -o-transition: all 0.7s ease-out 0s;  /* Opera 10.5+ */
    transition: all 0.7s ease-out 0s;
}

select {
    padding: 7px 10px;
}

input:focus, select:focus
{
    background: #6699cc;
    color: #e7f3ff;
    text-shadow:
        -1px -1px 0 #666,
        1px -1px 0 #666,
        -1px 1px 0 #666,
        1px 1px 0 #666;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}

该 css 适用于特定页面中找到的 INPUT 和 SELECT 标记。

现在，这确实在焦点事件上设置了下拉框的样式，背景转换为蓝色（在 Firefox 中有效），但我想做的是向下拉框添加一个弯曲的边框，以便它与选择输入本身。

这将实现类似这样的效果：

( Choose )
( Option )
| Option |
( Option )

与此相比（请原谅我的粗略示例）：

( Choose )
| Option |
| Option |
| Option |

我不知道这是否可能，因为我应用于选择标签的背景样式正在生效，但是边框半径样式仅应用于 SELECT 输入本身，而不应用于下拉框。

请有这方面更多知识的人花几分钟来启发我吗？

是否可以向下拉框添加弯曲边框，或者只能使用弯曲边框设置 SELECT 输入的样式？

原文

I am trying to style a select drop down box.

So far, I have achieved a styled effect within the drop down box itself (the box that drops down with the options) by applying certain styles to the select tag.

Here is the css I have used so far:

input, select {
    background: #fcfcfc;
    padding: 7px 25px;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6a6f75;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-background-clip: padding-box;
    -webkit-transition: all 0.7s ease-out 0s;  /* Saf3.2+, Chrome */
    -moz-transition: all 0.7s ease-out 0s;  /* FF4+ */
    -ms-transition: all 0.7s ease-out 0s;  /* IE10? */
    -o-transition: all 0.7s ease-out 0s;  /* Opera 10.5+ */
    transition: all 0.7s ease-out 0s;
}

select {
    padding: 7px 10px;
}

input:focus, select:focus
{
    background: #6699cc;
    color: #e7f3ff;
    text-shadow:
        -1px -1px 0 #666,
        1px -1px 0 #666,
        -1px 1px 0 #666,
        1px 1px 0 #666;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}

This css applies to the INPUT and SELECT tags found within a specific page.

Now, this does style the drop down box on the focus event, with the background transforming to blue (works in Firefox) What I want to do though, is add a curved border to the drop down box, so that it blends in more with the select input itself.

This will achieve an effect something like this:

( Choose )
( Option )
| Option |
( Option )

In comparison to this (please forgive my crude examples):

( Choose )
| Option |
| Option |
| Option |

I don't know if this is even possible yet, as the background styles I have applied to the select tag are coming into effect, but the border radius styles are only applied to the SELECT input itself and not the drop down box.

Would someone with some more knowledge in this regard, please take a few minutes to enlighten me?

Is it possible to add a curved border to the drop down box, or is it only possible to style the SELECT input with a curved border?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

本王不退位尔等都是臣 2025-01-03 20:57:44

您将无法实现此 SELECT DROPDOWN 样式，使用标准 HTML 表单元素，您必须使用 DIV 非表单元素“替换”下拉列表/选择，然后将所选值更新为隐藏表单元素或隐藏选择下拉菜单。

如果你按照你想要的方式得到它，它就不会跨浏览器兼容。

jQuery 替代品的示例如下： https://stackoverflow.com/a/8450718/158014

回复收藏 0 原文

你是年少的欢喜 2025-01-03 20:57:44

正如 @jakub 提到的，您将无法使用

这就是为什么我曾经制作过这个 jQuery 插件： jQuery.simpleselect

它复制了 HTML 的行为使用 div

HTML

<select id="the_select" name="the_select"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select>

$("#the_select").simpleselect();

这行 JavaScript 会将您的常规

<div class="hidden_select_container"> 
  <select id="the_select" name="the_select" class="simpleselected"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
  </select> 
</div> 
<div class="simpleselect" id="simpleselect_the_select"> 
  <div class="placeholder">Two</div> 
  <div class="options"> 
    <div class="option">One</div> 
    <div class="option">Two</div> 
    <div class="option">Three</div> 
    <div class="option">Four</div> 
  </div> 
</div>

这种行为有多个优点：

您可以继续编写常规

文档并下载：jQuery.simpleselect

As @jakub mentionned, you won't be able to style your select dropdown using <select> and <option> tags.

That's why I once made this jQuery plugin: jQuery.simpleselect

It replicates the behavior of a HTML <select> using divs so that you can style whatever you want, however you want. And it's really easy to use:

HTML

<select id="the_select" name="the_select"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select>

$("#the_select").simpleselect();

This line of JavaScript will transform your regular <select> into the HTML below

<div class="hidden_select_container"> 
  <select id="the_select" name="the_select" class="simpleselected"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
  </select> 
</div> 
<div class="simpleselect" id="simpleselect_the_select"> 
  <div class="placeholder">Two</div> 
  <div class="options"> 
    <div class="option">One</div> 
    <div class="option">Two</div> 
    <div class="option">Three</div> 
    <div class="option">Four</div> 
  </div> 
</div>

This behavior has multiple advantages:

You keep writing regular <select>s, so if one day you want to stop using the plugin, you don't have any HTML to update
The <select> is replaced with <div>s, so it's fully styleable
The <select> is hidden, not removed: if the form is submitted, the selected value WILL be submitted like it should be with a regular <select>

Doc and download: jQuery.simpleselect

回复收藏 0 原文

~没有更多了~