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

sourcetip

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

fileupload 2023. 8. 26. 12:10

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

확인란(입력) 테두리 스타일을 변경하려면 어떻게 해야 합니까?내가 넣었습니다border:1px solid #1e5180하지만 FireFox 3.5에서는 아무 일도 일어나지 않습니다!

"사용하는 합니다. 예:outline: 1px solid #1e5180.

사용해야 합니다.

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

그런 다음 기본 확인란 이미지/스타일을 삭제하고 스타일을 지정할 수 있습니다.어쨌든 파이어폭스에는 여전히 국경이 있을 것입니다.

만약 어떤 브라우저에서 무슨 일이 일어난다면 저는 놀랄 것입니다.이것은 브라우저가 스타일을 많이 만들지 못하게 하는 뛰어난 폼 요소 중 하나이며, 사람들은 보통 자바스크립트로 대체하여 확인란처럼 보이고 동작하도록 스타일/코드화할 수 있습니다.

상자 그림자를 사용하여 테두리를 위장할 수 있습니다.

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

여기 확인란 티커에 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">

다음은 마틴의 사용자 정의 확인란 및 CSS3 LINK가 있는 라디오 버튼을 기반으로 하는 순수한 CSS(이미지 없음) 교차 검색 솔루션입니다. 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.80m)
오페라 (33.0.1990.43)
Internet Explorer(11.0.10240.16431 [업데이트 버전: 11.0.22])
Microsoft Edge(20.10240).16384.0)
Safari 모바일 아이폰 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>

Firefox, Chrome 및 Safari의 경우 아무 일도 일어나지 않습니다.

IE의 경우 테두리가 확인란 외부에 적용되고(확인란의 일부가 아님), 확인란의 "멋진" 음영 효과가 사라집니다(기존 확인란으로 표시됨).

Opera의 경우 테두리 스타일은 실제로 확인란 요소에 테두리를 적용하고 있습니다.
또한 Opera는 체크박스의 다른 스타일링을 다른 브라우저보다 더 잘 처리합니다. 색상은 체크박스의 색상으로 적용되고 배경색은 체크박스 내부의 배경색으로 적용됩니다(IE는 체크박스가 내부에 있는 것처럼 배경을 적용합니다).<div>(배경 포함)

결론

안에 를 감는 것입니다.<div>다른 사람들이 제안한 것처럼.
외관을 완전히 제어하려면 고급 이미지/자바스크립트 접근 방식을 사용해야 합니다. 다른 사용자도 마찬가지입니다.

나도 알아요, 나도 알아요.그러나 약간의 해결 방법은 레이블 태그 안에 확인란을 넣은 다음 레이블에 테두리를 두르는 것입니다.

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

그런 다음 레이블 스타일을 지정합니다.

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

시각적 모양을 획기적으로 변경하려면 순수 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>&nbsp;</span>Label text
</label>

<!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>

다음은 간단한 방법입니다(의사 요소/클래스 앞 또는 뒤에 사용).

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 */
}

당신이 해야 할 일은 두 가지입니다.

outline: 1px solid #63DDCF
border: none !important;

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

'sourcetip' 카테고리의 다른 글

어떻게 설정합니까?New-WebAppPool 사용 시 NET Framework 버전은 무엇입니까? (0)	2023.08.26
Python Pandas - Excel 시트의 특정 열에 쓰는 방법 (0)	2023.08.26
감사 테이블에 대한 트리거 생성 (0)	2023.08.26
사용자 지정 주석 @Foo가 있는 모든 콩을 어떻게 찾을 수 있습니까? (0)	2023.08.26
Run As: Spring Boot App과 Run As: Java Application의 차이점이 있습니까? (0)	2023.08.26

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

각종 프로그래밍 정보를 다루는 블로그입니다.

ajax, powershell, python, spring-boot, MySQL, MongoDB, css, MariaDB, AngularJS, JSON, wpf, c, sql-server, GIT, WordPress, Oracle, Excel, reactjs, ASP.NET, jquery,

Today :
Yesterday :

fileupload

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

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

결론

'sourcetip' 카테고리의 다른 글

'sourcetip'의 다른글

티스토리툴바

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

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

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

결론

'sourcetip' 카테고리의 다른 글

'sourcetip'의 다른글

관련글

티스토리툴바