Html 如何在 CSS 中更改复选框的边框样式？

Question

提问by Ricky

How can I change checkbox (input) border's style? I've put border:1px solid #1e5180upon it, but in FireFox 3.5, nothing happens!

如何更改复选框（输入）边框的样式？我已经穿上border:1px solid #1e5180了，但在 FireFox 3.5 中，什么也没有发生！

Answer 1

采纳答案by Valerij

If something happens in anybrowser I'd be surprised. This is one of those outstanding form elements that browsers tend not to let you style that much, and that people usually try to replace with javascript so they can style/code something to look and act like a checkbox.

如果在任何浏览器中发生某些事情，我会感到惊讶。这是浏览器往往不会让您设置那么多样式的出色表单元素之一，并且人们通常会尝试用 javascript 替换，以便他们可以设置样式/编码某些内容，使其外观和行为类似于复选框。

Answer 2

回答by Greg

I suggest using "outline" instead of "border". For example: outline: 1px solid #1e5180.

我建议使用“轮廓”而不是“边框”。例如：outline: 1px solid #1e5180。

Answer 3

回答by Valerij

You should use

你应该使用

-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;

Then you get rid of the default checkbox image/style and can style it. Anyway a border will still be there in Firefox

然后你摆脱默认的复选框图像/样式并可以设置它的样式。无论如何，Firefox 中仍然会有边框

Answer 4

回答by Dennis Heiden

You can use box shadows to fake a border:

您可以使用框阴影来伪造边框：

-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);

Answer 5

回答by Adan Rehtla

Here is a pure CSS (no images) cross-browser solution based on Martin's Custom Checkboxes and Radio Buttons with CSS3 LINK: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons-with-css3-revisited/

这是一个基于 Martin's Custom Checkboxes and Radio Buttons with CSS3 LINK 的纯 CSS（无图像）跨浏览器解决方案：http: //martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-css3-revisited/

Here is a jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/

这是一个 jsFiddle：http: //jsfiddle.net/DJRavine/od26wL6n/

I have tested this on the following browsers:

我已经在以下浏览器上对此进行了测试：

FireFox (41.0.2) (42)
Google Chrome (46.0.2490.80 m)
Opera (33.0.1990.43)
Internet Explorer (11.0.10240.16431 [Update Versions: 11.0.22])
Microsoft Edge (20.10240.16384.0)
Safari Mobile iPhone iOS9 (601.1.46)

火狐 (41.0.2) (42)
谷歌浏览器 (46.0.2490.80 m)
歌剧 (33.0.1990.43)
Internet Explorer（11.0.10240.16431 [更新版本：11.0.22]）
Microsoft Edge (20.10240.16384.0)
Safari 移动版 iPhone iOS9 (601.1.46)

label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}
 
label *,
label *
{
    cursor: pointer;
}
 
input[type="radio"],
input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}
 
input[type="radio"] + span,
input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}
 
label:hover span::before,
label:hover span::before
{
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
}
 
label:hover span,
label:hover span
{
    color: #000;
}
 
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
     
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
     
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}
 
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before
{
    color: #666;
}
 
input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span
{
    cursor: default;
     
    -moz-opacity: .4;
    -webkit-opacity: .4;
    opacity: .4;
}
 
input[type="checkbox"] + span::before
{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
 
input[type="radio"]:checked + span::before
{
    content: "22";
    font-size: 30px;
    margin-top: -1px;
}
 
input[type="checkbox"]:checked + span::before
{
    content: "14";
    font-size: 12px;
}



input[class="blue"] + span::before
{
    border: solid 1px blue;
    background: #B2DBFF;
    background: -moz-radial-gradient(#B2DBFF, #dfdfdf);
    background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);
    background: -ms-radial-gradient(#B2DBFF, #dfdfdf);
    background: -o-radial-gradient(#B2DBFF, #dfdfdf);
    background: radial-gradient(#B2DBFF, #dfdfdf);
}
input[class="blue"]:checked + span::before
{
    color: darkblue;
}



input[class="red"] + span::before
{
    border: solid 1px red;
    background: #FF9593;
    background: -moz-radial-gradient(#FF9593, #dfdfdf);
    background: -webkit-radial-gradient(#FF9593, #dfdfdf);
    background: -ms-radial-gradient(#FF9593, #dfdfdf);
    background: -o-radial-gradient(#FF9593, #dfdfdf);
    background: radial-gradient(#FF9593, #dfdfdf);
}
input[class="red"]:checked + span::before
{
    color: darkred;
}

 <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-02"  class="blue" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-03"  class="red" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>

Answer 6

回答by pendingfox

Here's my version that uses FontAwesome for checkbox ticker, I think FontAwesome is used by almost everybody so it's safe to assume you have it too. Not tested in IE/Edge and I don't think anyone cares.

这是我使用 FontAwesome 作为复选框代码的版本，我认为几乎每个人都使用 FontAwesome，因此可以安全地假设您也拥有它。未在 IE/Edge 中测试，我认为没有人关心。

input[type=checkbox] {
 -moz-appearance:none;
 -webkit-appearance:none;
 -o-appearance:none;
 outline: none;
 content: none; 
}

input[type=checkbox]:before {
 font-family: "FontAwesome";
    content: "\f00c";
    font-size: 15px;
    color: transparent !important;
    background: #fef2e0;
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    margin-right: 7px;
}

input[type=checkbox]:checked:before {

 color: black !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<input type="checkbox">

Answer 7

回答by Hussam

I'm outdated I know.. But a little workaround would be to put your checkbox inside a label tag, then style the label with a border:

我知道我已经过时了..但是一个小的解决方法是将您的复选框放在标签标签内，然后用边框设置标签样式：

<label class='hasborder'><input type='checkbox' /></label>

then style the label:

然后设置标签样式：

.hasborder { border:1px solid #F00; }

Answer 8

回答by awe

For Firefox, Chromeand Safari, nothing happens.

对于Firefox、Chrome和Safari，没有任何反应。

For IEthe border is applied outside the checkbox (not as part of the checkbox), and the "fancy" shading effect in the checkbox is gone (displayed as an oldfashioned checkbox).

对于IE，边框应用在复选框之外（不是作为复选框的一部分），并且复选框中的“花式”阴影效果消失了（显示为老式复选框）。

For Operathe border style is actually applying the border on the checkbox element.
Operaalso handles other stylings on the checkbox better than other browsers: coloris applied as the color of the tick, background-coloris applied as background color inside the checkbox (IE applies the background as if the checkbox was inside a <div>with background)).

对于Opera 而言，边框样式实际上是在复选框元素上应用边框。
Opera还可以比其他浏览器更好地处理复选框上的其他样式：颜色作为勾号的颜色应用，背景颜色作为复选框内部的背景颜色应用（IE 应用背景就像复选框在<div>带背景的内部一样）） .

Conclusion

结论

The easiest solution is to wrap the checkbox inside a <div>like others have suggested.
If you want to completely control the appearance you will have to go with the advanced image/javascript approach, also meantiond by others.

最简单的解决方案是<div>像其他人建议的那样将复选框包裹在里面。
如果您想完全控制外观，则必须使用其他人所指的高级图像/javascript 方法。

Answer 9

回答by ChrisR

Styling checkboxes (and many other input elements for that mater) is not really possible with pure css if you want to drastically change the visual appearance.

如果您想彻底改变视觉外观，那么使用纯 css 样式复选框（以及该材料的许多其他输入元素）是不可能的。

Your best bet is to implement something like jqTransformdoes which actually replaces you inputs with images and applies javascript behaviour to it to mimic a checkbox (or other element for that matter)

你最好的选择是实现像jqTransform这样的东西，它实际上用图像替换了你的输入，并将 javascript 行为应用于它来模拟复选框（或其他元素）

Answer 10

回答by LGT

No, you still can't style the checkbox itself, but I (finally) figured out how to style an illusion while keeping the functionalityof clicking a checkbox. It means that you can toggle it even if the cursor isn't perfectly still without risking selecting text or triggering drag-and-drop!

不，您仍然无法设置复选框本身的样式，但我（最终）想出了如何在保持单击复选框的功能的同时为幻觉设置样式。这意味着即使光标不完全静止，您也可以切换它，而不必冒险选择文本或触发拖放！

The example is using a span "button" as well as some text in a label, but it gives you the idea of how you can make the checkbox invisible and draw anything behind it.

该示例使用跨度“按钮”以及标签中的一些文本，但它让您了解如何使复选框不可见并在其后面绘制任何内容。

This solution probably also fits radio buttons.

此解决方案可能也适合单选按钮。

The following works in IE9, FF30.0 and Chrome 40.0.2214.91 and is just a basic example. You can still use it in combination with background images and pseudo-elements.

以下适用于 IE9、FF30.0 和 Chrome 40.0.2214.91，只是一个基本示例。您仍然可以将它与背景图像和伪元素结合使用。

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* make it transparent */
    z-index: 666; /* place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>

Html 如何在 CSS 中更改复选框的边框样式？

提问by Ricky

采纳答案by Valerij

回答by Greg

回答by Valerij

回答by Dennis Heiden

回答by Adan Rehtla

回答by pendingfox

回答by Hussam

回答by awe

Conclusion

结论

回答by ChrisR

回答by LGT

相关推荐

最近更新

标签

Html 如何在 CSS 中更改复选框的边框样式？

提问by Ricky

采纳答案by Valerij

回答by Greg

回答by Valerij

回答by Dennis Heiden

回答by Adan Rehtla

回答by pendingfox

回答by Hussam

回答by awe

Conclusion

结论

回答by ChrisR

回答by LGT

相关推荐

Html 将一个 div 定位到另一个的右侧

Html 为什么在 html5 中使用 role 属性

Html 仅使用 CSS 的矩形图像上的圆角

Html ul 中 ul 的正确语义

相关推荐

最近更新

标签