当前位置：文江博客话题详情

CSS WebKit SELECT

从

发布于 2024-11-03 12:34:54 字数 410 浏览 0 评论 0原文

Chrome 的用户代理样式表为

没有人在工作。

当我在 webkit 的开发工具中检查该元素时，计算样式仍然将半径列为 5px。但如果我单击旁边的扩展箭头查看具体信息，它会显示：element.style - 0px。下面显示了我给出的 0px 外部 css 规范，以及 5px 的用户代理样式表规范。后两者都被划掉了，正如它们应该的那样。

有什么想法吗？

收藏 0

分享到微博

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

扫码二维码加入Web技术交流群

发布评论

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

评论（15）

指尖上的星空 2024-11-10 12:34:54

这对我有用（样式第一个外观而不是下拉列表）：

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

This works for me (styles the first appearance not the dropdown list):

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

回复收藏 0 原文

℡Ms空城旧梦 2024-11-10 12:34:54

只是我的下拉图像解决方案(inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: 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='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

我正在使用bootstrap，这就是我使用select.form-control
的原因
您可以改用 select{ 或 select.your-custom-class{。

Just my solution with dropdown image (inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: 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='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

I'm using bootstrap that's why I used select.form-control
You can use select{ or select.your-custom-class{ instead.

回复收藏 0 原文

彩虹直至黑白 2024-11-10 12:34:54

如果你想要方形边框并且仍然想要小扩展箭头，我推荐这个：

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}

If you want square borders and still want the little expander arrow, I recommend this:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}

回复收藏 0 原文

千年*琉璃梦 2024-11-10 12:34:54

这里有一些很好的解决方案，但这个不需要 SVG，通过 outline 保留边框并将其设置为与按钮齐平。

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}

<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>

Some good solutions here but this one doesn't need SVG, preserves the border via outline and sets it flush on the button.

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}

<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>

回复收藏 0 原文

濫情▎り 2024-11-10 12:34:54

虽然最上面的答案删除了边框，但它也删除了箭头，这使得用户将元素识别为选择的元素变得极其困难（如果不是不可能的话）。

我的解决方案是在选择后面粘贴一个白色 div （边框半径：0px）。将其位置设置为绝对，将其高度设置为选择的高度，然后就可以开始了！

回复收藏 0 原文

百合的盛世恋 2024-11-10 12:34:54

具有自定义右下拉箭头的解决方案，仅使用 css（无图像）

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}

<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>

Solution with custom right drop-down arrow, uses only css (no images)

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}

<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>

回复收藏 0 原文

寒冷纷飞旳雪 2024-11-10 12:34:54

保持简单并避免弄乱箭头和其他此类功能的一种方法是将其放置在与选择标签具有相同背景颜色的 div 中。

回复收藏 0 原文

你的心境我的脸 2024-11-10 12:34:54

应避免消除箭头。保留下拉箭头的解决方案是首先从下拉列表中删除样式：

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

然后在 HTML 中的下拉列表之前直接创建 div：

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

并像这样设置 div 样式：

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

显示内联将阻止 div 转到新行，绝对位置将删除从页面的流程来看。最终结果是一个漂亮干净的下划线，您可以根据需要设置样式，并且下拉列表的行为仍然符合用户的预期。

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 原文

别忘他 2024-11-10 12:34:54

插入框阴影就可以解决问题。

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

Inset box-shadow does the trick.

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

回复收藏 0 原文

西瑶 2024-11-10 12:34:54

由于某种原因它实际上受到边框颜色的影响？？？当您使用标准颜色时，角会保持圆角，但如果您稍微更改颜色，圆角就会消失。

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

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

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

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 原文

于我来说 2024-11-10 12:34:54

好吧，我得到了解决方案。希望它可以帮助你:)

select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }

<select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>

well i got the solution. hope it may help you :)

select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }

<select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>

回复收藏 0 原文

风柔一江水 2024-11-10 12:34:54

以下是执行此操作的方法；

创建一个看起来像下拉菜单的背景图像。
关闭浏览器外观
对齐选择组件上的背景图像

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

Following is the way to do it;

Create a background image that looks like a dropdown.
Switch off browser appearance
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 原文

儭儭莪哋寶赑 2024-11-10 12:34:54

我使用了jordan314的解决方案，但后来我添加了“border-light”类来选择。如果你在css中定义了默认的border-light类，你可以直接使用它。它只是将边框定义为白色）。我将边框更改为方形/删除半径，并保留箭头。

这就是我所做的：

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

如果你没有预定义的 border-light，只需在你的 css 中添加：

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

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>

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 #ddd;
   background-color:white;
 }
</style>

回复收藏 0 原文

空名 2024-11-10 12:34:54

火狐浏览器：18

.squaredcorners {
    -moz-appearance: none;
}

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

回复收藏 0 原文

橙幽之幻 2024-11-10 12:34:54

请将 CSS 设置为Try。

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

如果有效，

Set the CSS as

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

Try if it works.

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文