当前位置：theitroad>CSS 样式复选框、单选按钮和下拉菜单

CSS 样式复选框、单选按钮和下拉菜单

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/1125226/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 20:48:36 　来源:igfitidea点击:

Styling checkboxes, radio buttons and dropdowns

css

提问by iceangel89

How can I style HTML checkboxes, radio buttons and dropdowns? Or can I?

如何设置 HTML 复选框、单选按钮和下拉菜单的样式？或者我可以吗？

I'd like to use an image for checkboxes or radiobuttons, and the same for lists - the dropdown arrow doesn't look nice most of the time.

我想为复选框或单选按钮使用图像，对于列表也是如此 - 下拉箭头在大多数情况下看起来不太好。

回答by peirix

Short answer: You can't do it nicely and consistently.

简短的回答：你不能做得很好而且始终如一。

The answer you might want to hear, depending on your situation: Use jQuery or something similar, which will give you plenty of pluginsto choose from.

根据您的情况，您可能想听到的答案是：使用 jQuery 或类似的东西，这将为您提供大量插件供您选择。

Thesetwoare some of the better ones, as it will let you style just about all of the different controls.

这两个是更好的一些，因为它可以让您设计几乎所有不同的控件。

回答by Danield

You certainly can,

你当然可以，

Checkboxesand Radiobuttonsare easy to customizewith just css (no js). The implementation (already mentioned by KunalB above) involves hiding the input and using the label (with the beforepseudo element for the custom image) to trigger the input

Checkboxes和Radio按钮很容易只用 css（没有 js）定制。实现（上面已经由 KunalB 提到）涉及隐藏输入并使用标签（带有before自定义图像的伪元素）来触发输入

Dropdownson the other hand are a lot more difficultand to date there's no 100% pure-css + cross-browser solution... (Here's my S.O. answerfor dropdowns)

Dropdowns另一方面要困难得多，迄今为止还没有 100% 纯 css + 跨浏览器解决方案...... （这是我对下拉菜单的 SO 答案）

LIVE DEMOfor all 3: Radio buttons,Checkboxes and Dropdowns.

所有 3 种现场演示：单选按钮、复选框和下拉菜单。

Custom Checkbox

自定义复选框

h2 {
  font-weight: bold;
  margin: 20px 0 5px;
}

li {
  margin: 0.5em 0;
}


/*#region checkbox */

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]~label {
  display: inline;
  font-size: 18px;
}

input[type="checkbox"]~label:before {
  content: '';
  border-radius: 0.2em;
  border: 1px solid #333;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 0.5em;
  width: 32px;
  height: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

input[type="checkbox"]:checked~label:before {
  content: '?';
}
<h2>Custom Checkbox</h2>
<div>
  <input checked="checked" id="RememberMe" name="RememberMe" type="checkbox">
  <label for="RememberMe">Remember me</label>
</div>

Custom Radio Button

自定义单选按钮

input[type="radio"] {
  display: none;
}

input[type="radio"]+label {
  display: inline;
  font-size: 18px;
}

input[type="radio"]+label:before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 1px solid #222;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.5em;
}

input[type="radio"]:checked+label:before {
  content: '';
  box-shadow: inset 0 0 0 0.6em white, inset 0 0 0 1em #333;
}

h2 {
  font-weight: bold;
  margin: 20px 0 5px;
}

ul {
  list-style: none;
}

li {
  margin: 0.5em 0;
}
<h2>Custom Radio Button</h2>
<ul>
  <li>
    <input type="radio" id="radio1" name="radios" checked />
    <label for="radio1">Apples</label>
  </li>
  <li>
    <input type="radio" id="radio2" name="radios" />
    <label for="radio2">Pineapples </label>
  </li>
</ul>

Custom Dropdown

自定义下拉菜单

select {
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}


/* CAUTION: Internet Explorer hackery ahead */

select::-ms-expand {
  display: none;
  /* Remove default arrow in Internet Explorer 10 and 11 */
}


/* Target Internet Explorer 9 to undo the custom arrow */

@media screen and (min-width:0
<h2>Custom Dropdown</h2>

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>
) {
  select {
    background: none;
    padding: 5px;
  }
}
##代码##

回答by AlbertoPL

I believe CSS 3 will allow you to style those elements, but for now it isn't directly possible.

我相信 CSS 3 将允许您设置这些元素的样式，但目前还不能直接实现。

See this question: CSS checkbox input styling

看到这个问题：CSS 复选框输入样式

回答by Amal Sirisena

You can style form elements, but it is difficult (impossible?) to get a consistent style across browsers and operating systems with a pure CSS approach. Some script manipulation of styles would also be required.

您可以为表单元素设置样式，但很难（不可能？）使用纯 CSS 方法在浏览器和操作系统之间获得一致的样式。还需要对样式进行一些脚本操作。

This is a very good article that discusses the options and issues: Styling form controls

这是一篇很好的文章，讨论了选项和问题：样式表单控件

Listamatichas a great collection of CSS list styles.

Listamatic拥有大量 CSS 列表样式。

回答by geowa4

This guypretty much has all the styling you can put on form controls, but it's not consistent across browsers. You are going to have to go custom. Use a custom image for the checkbox, then change it's source to get the clicked version (and vice versa). The select menu might be a little trickier. I hope there's a jQuery plugin out there that can help you!

这个家伙几乎拥有您可以放在表单控件上的所有样式，但它在浏览器之间并不一致。你将不得不去定制。为复选框使用自定义图像，然后更改其来源以获取单击的版本（反之亦然）。选择菜单可能有点棘手。我希望有一个 jQuery 插件可以帮助你！

回答by Dani Cricco

You can't put an image as a checkbox, but you can always build your own checkbox :D.

您不能将图像作为复选框放置，但您始终可以构建自己的复选框：D。

Put a hidden field and an image, add an "onclick" event over the image. When the onclick is fired check the status of the hidden field, change the image according to the status and save the status of the checkbox in your hidden field.

放置一个隐藏字段和一个图像，在图像上添加一个“onclick”事件。当 onclick 被触发时，检查隐藏字段的状态，根据状态更改图像并将复选框的状态保存在隐藏字段中。

You should check for custom javascript libraries. One of my favorities is http://www.dojotoolkit.org/

您应该检查自定义 javascript 库。我的最爱之一是http://www.dojotoolkit.org/

回答by Tony C

Most likely you won't be able to, it is very difficult. Personally, I would just stay away from that.

很可能你将无法做到，这非常困难。就个人而言，我会远离那个。

回答by KunalB

You might find my post useful: http://kunal-b.in/2011/07/css-for-attractive-checkboxes-and-radio-buttons/.

您可能会发现我的帖子很有用：http: //kunal-b.in/2011/07/css-for-attractive-checkboxes-and-radio-buttons/。

The basic idea is to hide the form ele-ment (checkbox/radio but-ton) and style the label instead using CSS. Thanks to the :checked selec-tor, it's pos-si-ble to dis-tin-guish between the two label states by assign-ing styles to label and input:checked + label assum-ing that the label fol-lows the checkbox/radio but-ton in your html code. Using a for attribute in the code makes the com-plete label click-able, mod-i-fy-ing the state of the asso-ci-ated element.

基本思想是隐藏表单元素（复选框/单选按钮）并使用 CSS 设置标签样式。感谢 :checked 选择器，可以通过将样式分配给 label 和 input:checked + label 假设标签跟随复选框来区分两个标签状态/radio 按钮在您的 html 代码中。在代码中使用 for 属性使完整的标签可点击，修改相关元素的状态。

回答by Fizer Khan

Recently i come across amazing WTF, forms?from a creator of Bootstrap Mark otto. It has great styles for

最近我遇到了惊人的WTF，表格？来自 Bootstrap Mark otto的创建者。它有很棒的风格

  • Checkbox
  • Radio button
  • Select
  • Progress bar
  • File Browser
  • 复选框
  • 单选按钮
  • 选择
  • 进度条
  • 文件浏览器

Checkout http://wtfforms.com/

结帐http://wtfforms.com/

相关推荐

使用 CSS text-overflow 来改变设置高度的元素内的文本行数

使用 CSS text-overflow 来改变设置高度的元素内的文本行数

CSS SCSS 支持内联注释吗？

CSS SCSS 支持内联注释吗？

CSS 中的禁用按钮？

CSS 中的禁用按钮？

CSS 根据 div 大小调整字体大小

CSS 根据 div 大小调整字体大小

相关推荐
最近更新
标签