Как изменить стиль рамки флажка в CSS? - PullRequest
Новая
       39

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

108 голосов
/ 17 марта 2010

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

Ответы [ 13 ]

191 голосов
/ 11 апреля 2011

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

68 голосов
/ 03 июля 2010

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

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

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

59 голосов
/ 17 марта 2010

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

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

17 голосов
/ 11 февраля 2016

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

-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);
10 голосов
/ 06 ноября 2015

Это чистое кросс-браузерное решение CSS (без изображений), основанное на пользовательских флажках Мартина и радио-кнопках с 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>
10 голосов
/ 24 августа 2011

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

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

затем введите стиль метки: 

.hasborder { border:1px solid #F00; }
9 голосов
/ 17 марта 2010

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

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

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

Заключение

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

8 голосов
/ 07 октября 2018

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

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

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

4 голосов
/ 24 января 2015

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

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

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

Следующее работает в 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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...