Відповіді:
Якщо щось трапиться в будь-якому браузері, я був би здивований. Це один із тих видатних елементів форми, що браузери, як правило, не дозволяють вам так стильно, і що люди зазвичай намагаються замінити javascript, щоб вони могли стилювати / кодувати щось, щоб виглядати та діяти як прапорець.
Я пропоную використовувати "контур" замість "межі". Наприклад: outline: 1px solid #1e5180.
!importantдо свого css, використовуючи контур. Я тестував це в Firefox 12.0 і без! Важливо, контур буде зникати, поки я натискав прапорець.
Ви повинні використовувати
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;Тоді ви позбудетесь зображення / стилю прапорця за замовчуванням і зможете його стилізувати. У будь-якому випадку кордон все ще буде у Firefox
Ви можете використовувати тіньові коробки для підробки межі:
-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);Ось чисте перехресне браузерне рішення CSS (без зображень), засноване на користувальницьких прапорцях Мартіна та радіо кнопок з CSS3 LINK: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -з-css3-переглянуто /
Ось jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/
Я перевірив це в наступних браузерах:
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>Я застарів, я знаю. Але невеликим рішенням було б поставити прапорець всередині тегу мітки, а потім накреслити мітку з облямівкою:
<label class='hasborder'><input type='checkbox' /></label>потім стилюйте етикетку:
.hasborder { border:1px solid #F00; }label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }і тоді label > input[type=checkbox] { position: absolute; left: -999px; }це дозволить вам налаштувати стиль власного прапорця, і початковий прапорець все одно буде перевірятись / зніматися, але користувач цього не побачить. Вони побачать лише ваш власний прапорець.
:hoverі :checkedдля стилю інших станів у вашому користувальницькому прапорець.
Ось моя версія, яка використовує 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">Для Firefox , Chrome та Safari нічого не відбувається.
Для IE межа застосовується за межами прапорця (не як частина прапорця), і ефект "замисленого" затінення в цьому полі відсутній (відображається як старомодна прапорець).
Для Opera стиль межі фактично застосовує межу на елементі прапорця.
Opera також обробляє інші стилі на галочці краще, ніж інші веб-переглядачі: колір застосовується як колір галочки, колір тла застосовується як колір тла всередині прапорця (IE застосовує фон, як ніби прапорець знаходився всередині <div>з фоном)) .
Найпростіше рішення - загорнути прапорець всередину, <div>як запропонували інші.
Якщо ви хочете повністю контролювати зовнішній вигляд, вам доведеться скористатися вдосконаленим підходом зображення / JavaScript, а також іншими і іншими.
Позначення стилів (та багатьох інших вхідних елементів для цієї матриці) дійсно неможливо із чистим css, якщо ви бажаєте кардинально змінити візуальний вигляд.
Ваша найкраща ставка полягає в тому, щоб реалізувати щось на зразок jqTransform , що насправді замінює ваші входи зображеннями та застосовує до нього поведінку javascript, щоб імітувати прапорець (або інший елемент для цього)
Ні, ви все одно не можете самі стилізувати прапорець, але я (нарешті) зрозумів, як створити ілюзію, зберігаючи функціональність клацання прапорця. Це означає, що ви можете перемикати його, навіть якщо курсор не ідеально нерухомий, не ризикуючи вибирати текст або запускати перетягування!
На прикладі використовується проміжна "кнопка", а також деякий текст на етикетці, але це дає вам уявлення про те, як можна зробити прапорець невидимим і намалювати що-небудь за ним.
Це рішення, ймовірно, також підходить для перемикачів.
Наведені нижче роботи в 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> </span>Label text
</label>Ось простий спосіб (використовувати до або після псевдоелементів / класів):
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 */
}<!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>помістіть його в div і додайте межу до div