Как изменить стиль рамки флажка в CSS?

Как я могу изменить стиль рамки (входной) границы? Я положил на него border:1px solid #1e5180, но в FireFox 3.5 ничего не происходит!

ОТВЕТЫ

Ответ 1

Если что-то произойдет в любом браузере, я буду удивлен. Это один из тех выдающихся элементов формы, которые браузеры, как правило, не позволяют вам так много стилизовать, и что люди обычно пытаются заменить на javascript, чтобы они могли стиль/код, чтобы выглядеть и действовать как флажок.

Вот пример: prettyCheckboxes.

Ответ 2

Я предлагаю использовать "контур" вместо "границы". Например: outline: 1px solid #1e5180.

Ответ 3

Вы должны использовать

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

Затем вы избавляетесь от стандартного флажка image/style и можете его стилизовать. Во всяком случае, граница все еще будет в Firefox

Ответ 4

Вы можете использовать тени теней для подделки границы:

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

Ответ 5

Вот крошечное браузерное решение CSS (без изображений), основанное на пользовательских флажках Martin и Radio Buttons с CSS3 LINK: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons-with-css3-revisited/

Вот jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/

Я тестировал это в следующих браузерах:

  • FireFox (41.0.2) (42)
  • Google Chrome (46.0.2490.80 м)
  • Opera (33.0.1990.43)
  • Internet Explorer (11.0.10240.16431 [Обновить версии: 11.0.22])
  • Microsoft Edge (20.10240.16384.0)
  • Safari Mobile 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: "\2022";
    font-size: 30px;
    margin-top: -1px;
}
 
input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    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>

Ответ 6

Я устарел. Я знаю.. Но небольшим обходным решением было бы поставить ваш флажок внутри тега метки, а затем начертить ярлык с помощью рамки:

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

затем введите метку:

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

Ответ 7

Для Firefox, Chrome и Safari ничего не происходит.

Для IE граница применяется вне флажка (а не как часть флажка), а эффект "причудливого" затенения в этом флажке отсутствует (отображается как старомодный флажок).

Для Opera стиль рамки на самом деле применяет рамку на элементе флажка.
Opera также управляет другими стилями на флажке лучше, чем другие браузеры: цвет применяется, когда цвет тика, фоновый цвет применяется как цвет фона внутри флажка (IE применяет фон, как если бы флажок находился внутри <div> с фоном)).

Заключение

Самое простое решение - обернуть флажок внутри <div>, как и другие. Если вы хотите полностью контролировать внешний вид, вам придется идти с расширенным подходом к изображению /javascript, а также другими.

Ответ 8

Вот моя версия, которая использует 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">

Ответ 9

Флажки для стилизации (и многие другие элементы ввода для этого мата) на самом деле не возможны с чистым css, если вы хотите радикально изменить внешний вид.

Лучше всего реализовать что-то вроде jqTransform, которое фактически заменяет ваши входы изображениями и применяет к нему поведение JavaScript, чтобы имитировать флажок (или другой элемент, если на то пошло)

Ответ 10

Нет, вы по-прежнему не можете сами установить флажок, но я (наконец) понял, как создать иллюзию, а сохранить функциональность, щелкнув флажок. Это означает, что вы можете переключать его, даже если курсор не совсем по-прежнему не рискует выбрать текст или вызвать перетаскивание!

В примере используется span "button", а также некоторый текст в метке, но он дает вам представление о том, как сделать флажок невидимым и нарисовать что-нибудь позади него.

Это решение, вероятно, также подходит для переключателей.

В 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>

Ответ 11

Вот простой способ (использовать до или после псевдоэлементов/классов):

input[type=checkbox] {
    position: relative;
}

input[type=checkbox]:after {
    position: absolute;
    top: 0;
    left: 0;
    /* Above three lines allow the checkbox:after position at checkbox position */
    content: '';
    width: 32px;
    height: 32px;
    z-index: 1; /* This allows the after overlap the checkbox */
    /* Anything you want */
}

Ответ 12

<!DOCTYPE html>
<html>
<head>
<style> 

.abc123
{
	-webkit-appearance:none;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: #FFFFFF;
	border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
  content: "";
  display: inline-block;
  position: relative;
  top: -3px;
  left: 4px;
  width: 3px;
  height: 5px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
}

input[type=checkbox]:checked   {
    background: #327DFF;
    outline: none;
    border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
	outline: none;
}

input:hover {
   border: 1px solid rgba(50,125,255,1);
}

</style>
</head>
<body>

<input class="abc123" type="checkbox"></input>


</body>
</html>

Ответ 13

поместите его в div и добавьте границу в div

Ответ 14

<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>