CSS에서 확인란의 테두리 스타일을 변경하는 방법은 무엇입니까?

Programming

CSS에서 확인란의 테두리 스타일을 변경하는 방법은 무엇입니까?

procodes 2020. 7. 29. 21:50

CSS에서 확인란의 테두리 스타일을 변경하는 방법은 무엇입니까?

체크 박스 (입력) 테두리 스타일을 어떻게 변경합니까? 나는 border:1px solid #1e5180그것을 넣었 지만 FireFox 3.5에서는 아무 일도 일어나지 않습니다!

어떤 브라우저 에서 어떤 일이 발생하면 놀랄 것입니다. 이것은 브라우저가 그렇게 많은 스타일을 지정하지 않는 뛰어난 양식 요소 중 하나이며 사람들은 일반적으로 자바 스크립트로 바꾸려고 시도하여 확인란처럼 보이고 스타일을 지정할 수 있습니다.

다음 예는 다음과 같습니다 prettyCheckboxes .

"테두리"대신 "개요"를 사용하는 것이 좋습니다. 예를 들면 다음과 같습니다 outline: 1px solid #1e5180..

사용해야합니다

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

다음은 CSS3 링크가있는 Martin의 사용자 정의 확인란 및 라디오 버튼을 기반으로 한 순수한 CSS (이미지 없음) 크로스 브라우저 솔루션입니다. http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-css3-revisited /

다음은 jsFiddle입니다. http://jsfiddle.net/DJRavine/od26wL6n/

다음 브라우저에서 이것을 테스트했습니다.

파이어 폭스 (41.0.2) (42)
구글 크롬 (46.0.2490.80 m)
오페라 (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>

나는 구식입니다 .. 그러나 약간의 해결 방법은 확인란을 레이블 태그 안에 넣은 다음 테두리로 레이블을 지정하는 것입니다.

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

그런 다음 레이블의 스타일을 지정하십시오.

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

들어 파이어 폭스 , 크롬 및 사파리 아무 일도 발생하지 않습니다.

들어 IE 경계 체크 박스 (안 확인란의 일부로서) 외부에 적용되고 체크 박스 효과를 음영은 "공상은"사라 (AN oldfashioned 체크 박스로 표시)됩니다.

들어 오페라 테두리 스타일은 실제로 체크 박스 요소에 테두리를 적용합니다.
오페라는 또한 더 나은 다른 브라우저보다 체크 박스에 다른 stylings가 처리 : 색 눈금의 색으로 적용되는 배경 색상 의 체크 박스 내부의 배경색으로 적용된다 (체크 박스는 내부에 것처럼 IE는 배경을 적용 <div>) 배경) .

결론

가장 쉬운 해결책은 <div>다른 사람들이 제안한 것처럼 확인란을 감싸는 것 입니다.
모양을 완전히 제어하려면 다른 사람이 의미하는 고급 이미지 / 자바 접근 방식을 사용해야합니다.

여기에 체크 박스 티커에 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">

시각적 모양을 대폭 변경하려는 경우 순수 CSS를 사용하면 스타일 지정 체크 박스 (및 해당 mater의 다른 많은 입력 요소)를 실제로 사용할 수 없습니다.

Your best bet is to implement something like jqTransform does which actually replaces you inputs with images and applies javascript behaviour to it to mimic a checkbox (or other element for that matter)

No, you still can't style the checkbox itself, but I (finally) figured out how to style an illusion while keeping the functionality of clicking a checkbox. It means that you can toggle it even if the cursor isn't perfectly still without risking selecting text or triggering drag-and-drop!

The example is using a span "button" as well as some text in a label, but it gives you the idea of how you can make the checkbox invisible and draw anything behind it.

This solution probably also fits radio buttons.

The following works in IE9, FF30.0 and Chrome 40.0.2214.91 and is just a basic example. You can still use it in combination with background images and pseudo-elements.

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>

Here is a simple way (to use before or after pseudo elements / classes):

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>

put it in a div and add border to the div

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

참고URL : https://stackoverflow.com/questions/2460501/how-to-change-checkboxs-border-style-in-css

'Programming' 카테고리의 다른 글

호스트 네트워크를 시작할 수 없습니다 (0)	2020.07.29
요세미티와 발 그린 (0)	2020.07.29
PHP에서 루프를 '종료'할 수 있습니까? (0)	2020.07.29
Arel and Rails에서 LIKE 쿼리를 수행하는 방법은 무엇입니까? (0)	2020.07.29
GUID가 항상 고유하다고 가정해도 안전합니까? (0)	2020.07.29

현재글CSS에서 확인란의 테두리 스타일을 변경하는 방법은 무엇입니까?

procodes

CSS에서 확인란의 테두리 스타일을 변경하는 방법은 무엇입니까?

CSS에서 확인란의 테두리 스타일을 변경하는 방법은 무엇입니까?

결론

'Programming' 카테고리의 다른 글

'Programming'의 다른글

티스토리툴바

CSS에서 확인란의 테두리 스타일을 변경하는 방법은 무엇입니까?

CSS에서 확인란의 테두리 스타일을 변경하는 방법은 무엇입니까?

결론

'Programming' 카테고리의 다른 글

'Programming'의 다른글

관련글

티스토리툴바