답변:
어떤 브라우저 에서 어떤 일이 발생하면 놀랄 것입니다. 이것은 브라우저가 그다지 스타일링을 허용하지 않는 경향이있는 뛰어난 양식 요소 중 하나이며, 사람들은 일반적으로 체크 박스처럼 보이고 작동하도록 무언가를 스타일링 / 코딩 할 수 있도록 자바 스크립트로 대체하려고합니다.
"테두리"대신 "개요"를 사용하는 것이 좋습니다. 예 : 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);다음은 Martin의 사용자 정의 체크 박스 및 CSS3 LINK가있는 라디오 버튼을 기반으로하는 순수한 CSS (이미지 없음) 크로스 브라우저 솔루션입니다. http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-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">들어 파이어 폭스 , 크롬 및 사파리 아무 일도 발생하지 않습니다.
들어 IE 경계 체크 박스 (안 확인란의 일부로서) 외부에 적용되고 체크 박스 효과를 음영은 "공상은"사라 (AN oldfashioned 체크 박스로 표시)됩니다.
들어 오페라 테두리 스타일은 실제로 체크 박스 요소에 테두리를 적용합니다.
Opera 는 체크 박스의 다른 스타일도 다른 브라우저보다 더 잘 처리합니다. 색상 은 체크 박스의 색상 으로 적용되고 배경색 은 체크 박스 내부의 배경색으로 적용됩니다 (IE는 체크 박스가 배경이있는 것처럼 배경을 적용합니다 <div>). .
가장 쉬운 해결책은 <div>다른 사람들이 제안한 것처럼 확인란을 안에 감싸는 것 입니다.
외모를 완전히 제어하려면 고급 이미지 / 자바 스크립트 접근 방식을 사용해야합니다.
시각적 모양을 대폭 변경하려는 경우 순수한 CSS에서는 스타일 지정 확인란 (및 해당 재료에 대한 다른 많은 입력 요소)이 실제로 불가능합니다.
가장 좋은 방법은 실제로 입력을 이미지로 바꾸고 자바 스크립트 동작을 적용하여 확인란 (또는 해당 문제에 대한 다른 요소)을 모방하는 jqTransform 과 같은 것을 구현하는 것 입니다.
아니요, 여전히 확인란 자체의 스타일을 지정할 수는 없지만 기능 을 유지하면서 환상을 스타일링하는 방법을 (마지막으로) 알아 냈습니다. 을 클릭하는 . 즉, 커서가 완벽하지 않은 경우에도 텍스트를 선택하거나 드래그 앤 드롭을 트리거하지 않고 전환 할 수 있습니다!
이 예제는 레이블의 일부 텍스트와 함께 범위 "버튼"을 사용하지만 확인란을 보이지 않게 만들고 그 뒤에 무엇이든 그릴 수있는 방법에 대한 아이디어를 제공합니다.
이 솔루션은 라디오 버튼에도 적합합니다.
다음은 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에 테두리를 추가하십시오.