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

122

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

html  css 
— Рики
источник

Ответы:

63

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

— София
источник
4
Opera очень хорошо обрабатывает стили при установке флажка. IE имеет некоторый стиль, который обтекает флажок (а не сам флажок).
— awe
4
В наши дни они на самом деле уродливы: D
— Гергей Фехервари
1
все еще уродливы в 2020 году
— Пол
210

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

— Greg
источник
3
Outline - отличная альтернатива.
— Nippysaurus 05
4
Outline очень хорош и работает для всех полей ввода и выбора, что делает его полезным для классов ".error".
— SztupY 03
2
!importantПри использовании схемы вам может потребоваться добавить что-то в CSS. Я тестировал это в Firefox 12.0, и без! Important схема исчезла бы, пока я устанавливал флажок.
— Weezle
3
Это отличная альтернатива, но проблема схемы в том, что в IE7 она не работает !!
— Yises
13
@Yises Тебе нужно беспокоиться об IE7? Ой, извини.
— theblang 07
71

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

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

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

— Valerij
источник
2
Opera позволяет стилизовать флажки без лишних ухищрений - я бы не стал использовать стиль -o-appearance. Тем не менее, -moz-appearance и -webkit-appearance великолепны.
— Нилл 06
7
Упс - слишком рано заговорил: "-webkit-appearance: none;" похоже, отключает поведение флажка.
— Нилл 06
6
для меня (хром 5) это не так, вам нужно стилизовать: checked state extra
— Валерий
1
внешний вид никогда не был частью стандарта CSS. Не используйте это.
— Евгений
вау, это круто, я избавлюсь от плагинов. я могу делать что угодно => | input [type = checkbox] | input [type = checkbox]: hover | input [type = checkbox]: установлен | input [type = checkbox]: проверено: after ...
— h0mayun
21

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

-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);
— Деннис Хайден
источник
@retrovertigo какая версия?
— Деннис Хайден
Версия 12.0.2 (14606.3.4) / последний на MacOS 10.14
— retrovertigo
@retrovertigo Я проверил свое решение, и вы правы. Мой ответ не работает для Safari без дополнительных изменений (например, -webkit-appearance: none;). 3 года спустя я бы использовал решения, предоставленные pendingfox или Adan. Но я постараюсь продлить свой ответ в течение нескольких недель. Спасибо за ваш отзыв.
— Деннис Хайден
11

Вот кросс-браузерное решение на чистом CSS (без изображений), основанное на настраиваемых флажках и радиокнопках Мартина с ССЫЛКОЙ CSS3: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -с-CSS3-повторно /

Вот 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>
Развернуть фрагмент

— Адан Рехтла
источник
10

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

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

затем стилизуйте метку:

.hasborder { border:1px solid #F00; }
— Hussam
источник
1
Также имейте в виду, что элемент метки будет устанавливать флажок при каждом щелчке, даже если флажок не отображается внутри него. Итак, на этикетке вы можете сделать что-то вроде, label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }а затем label > input[type=checkbox] { position: absolute; left: -999px; }это позволит вам настроить свой собственный флажок, и исходный флажок все равно будет отмечен / снят, но пользователь его не увидит. Они будут видеть только ваш собственный флажок.
— Гэвин
1
Забыл добавить, тогда вы можете использовать селекторы, такие как :hoverи, :checkedчтобы стилизовать другие состояния вашего настраиваемого флажка.
— Гэвин
10

Вот моя версия, в которой 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">
Развернуть фрагмент

— pendingfox
источник
9

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

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

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

Вывод

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

— трепет
источник
2
+1 для исследования, но обернуть его внутри div - не решение. Это не позволяет укладывать флажок, это позволяет вам стиль вокруг флажка, если вы не начнете играть с попытками скрыть это и краски над ним , который будет иметь свои собственные проблемы.
Что ж, единственный браузер, который позволяет стилизовать сам флажок, - это Opera. Обернуть его внутри div - решение, которое может быть достаточно хорошим, но это действительно зависит от того, что вы хотите. IE на самом деле действует так, как будто вы помещаете его в div, если вы пытаетесь стилизовать флажок!
— awe
7

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

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

— ChrisR
источник
4

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

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

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

Следующее работает в 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>
— LGT
источник
2

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

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's position */
    content: '';
    width: 32px;
    height: 32px;
    z-index: 1; /* This allows the after overlap the checkbox */
    /* Anything you want */
}
— Алекс Фанг
источник
Я думаю, что это разумный способ изменить стиль вашего флажка и тому подобное.
— Alex Fang
1
Не работает в Firefox и IE. Что еще более важно, это неправильная реализация Chrome, потому что элементам void НЕ разрешается иметь какое-либо содержимое.
— Leo
Лео, вы неверно истолковываете термин «содержимое», все, что он говорит, это то, что у пустых элементов не может быть промежуточного содержимого, потому что нет закрывающего тега. например, <a> content </a> имеет закрывающий тег, поэтому между этими тегами может быть содержимое. но input не имеет закрывающего тега, поэтому в принципе не может иметь содержимого. С другой стороны, у псевдоэлементов есть свойство, называемое «контент», которое разрешено использовать везде.
— pendingfox 06
-1 

<!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>
Развернуть фрагмент

— KeepLearn
источник
Во-первых: «: после» создать √; Во-вторых: «-webkit-appearance: none», пусть исходный стиль не может работать, и тогда вы можете определить свой стиль.
— KeepLearn
2
Пожалуйста, напишите краткое описание вашего ответа.
— Angel F Syrus
-5

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

— Мидхат
источник
5
Тогда у вас будет двойная граница.
— Егор Павлихин
<div style = "border-style: solid; width: 120px;"> <input type = "checkbox" name = "mycheck"> Мой флажок </input> </div> отлично работает с htmlsandbox
— Midhat
8
Дайте определение «отлично работает». Например, я никогда не видел флажка шириной 120 пикселей.
-8 
<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>
— Мидхат
источник
7
@lexu Нет такой вещи, как </input>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.