맞춤 체크 박스 문제 맞춤 CSS

Question

내 체크 박스의 오른쪽 텍스트를 정렬하려고합니다. 현재 텍스트가 여러 줄로 표시됩니다.

내가 너비를 변경하고 그것을 고정 폭을 제공 시도 :

.checkbox span.custom { 
    margin-left: 34px; 
    display: inline-block; 
    width: 100px; // MY TRY 
} 

을하지만 옆에있는 텍스트를 체크 박스의 크기를 변경하지 않습니다.

CSS :

* { 
    box-sizing: border-box; 
} 

label { 
    display: inline-block; 
} 

.checkbox { 
    position: relative; 
    min-height: 24px; 
    font-size: 1.6rem; 
} 

.checkbox input { 
    -webkit-tap-highlight-color: transparent; 
    height: 10px; 
    margin: 6px; 
    opacity: 0; 
    outline: none; 
    position: absolute; 
    left: 1px; 
    top: 1px; 
    width: 10px; 
} 

.checkbox .custom { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    display: inline-block; 
    height: 24px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 24px; 
} 

.checkbox span { 
    display: inline-block; 
    margin-left: 34px; 
    margin-top: 0; 
    position: relative; 
    top: 3px; 
} 

.checkbox input:checked:not(:disabled) + .custom { 
    background-color: #0574ac; 
    border-color: #0574ac; 
} 

.checkbox span { 
    margin-left: 0px; 
} 

.checkbox span.custom { 
    margin-left: 34px; 
    display: inline-block; 
    width: 100px; // MY TRY 
} 

.checkbox span.custom .radio span.custom { 
    margin-left: 34px; 
    margin-right: 34px; 
    display: flex; 
} 

.radio input:checked + .custom:after { 
    background-color: #0574ac; 
    border-radius: 100%; 
    border: 3px solid #fff; 
    content: ""; 
    display: block; 
    height: 16px; 
    position: absolute; 
    width: 16px; 
} 

HTML :

<label for="checkbox1" class="checkbox"> 
     <input id="checkbox1" type="checkbox" role="checkbox" /><span class="custom">Checkbox 1</span> 
</label> 

JSFiddle Demo

Answer 1

당신은 당신이 가지고있는 .checkbox .custom 또한 width: 24px의 position: absolute를 제거해야이 당신에게 문제를 일으키는 것입니다.당신은 그 자체가 그래서는 opacity: 0없이 체크 박스로 예를 들어 추가 확인란에 대한 opacity: 0을 설정하는 이유

* { 
 
    box-sizing: border-box; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
} 
 

 
.checkbox { 
 
    position: relative; 
 
    min-height: 27px; 
 
    font-size: 1.6rem; 
 
} 
 

 
.checkbox input { 
 
    -webkit-tap-highlight-color: transparent; 
 
    margin: 6px; 
 
    opacity: 0; 
 
    outline: none; 
 
    position: relative; 
 
    left: 1px; 
 
    top: 1px; 
 
    line-height: 26px; 
 
} 
 
.checkbox input#checkbox2, .checkbox input#checkbox3 { 
 
    opacity: 1; 
 
} 
 
.checkbox3 { 
 
    display: flex; 
 
} 
 
.checkbox3 span { 
 
    order: -1; 
 
} 
 
.checkbox .custom { 
 
    background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    height: 27px; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
.checkbox span { 
 
    display: inline-block; 
 
    margin-left: 34px; 
 
    margin-top: 0; 
 
    position: relative; 
 
    top: 3px; 
 
} 
 

 
.checkbox.checkbox3 span.custom { 
 
    margin-left: 0; 
 
} 
 
.checkbox input:checked:not(:disabled) + .custom { 
 
    background-color: #0574ac; 
 
    border-color: #0574ac; 
 
} 
 

 
.checkbox span { 
 
    margin-left: 0px; 
 
} 
 

 
.checkbox span.custom { 
 
    margin-left: 34px; 
 
    display: inline-block; 
 
} 
 

 
.checkbox span.custom .radio span.custom { 
 
    margin-left: 34px; 
 
    margin-right: 34px; 
 
    display: flex; 
 
} 
 

 
.radio input:checked + .custom:after { 
 
    background-color: #0574ac; 
 
    border-radius: 100%; 
 
    border: 3px solid #fff; 
 
    content: ""; 
 
    display: block; 
 
    height: 16px; 
 
    position: absolute; 
 
    width: 16px; 
 
}

<label for="checkbox1" class="checkbox"> 
 
    <input id="checkbox1" type="checkbox" role="checkbox" /><span class="custom">Checkbox 1</span> 
 
</label> 
 
<br /> 
 
<label for="checkbox2" class="checkbox"> 
 
    <input id="checkbox2" type="checkbox" role="checkbox" /><span class="custom">Checkbox 2</span> 
 
</label> 
 
<br /> 
 
<label for="checkbox3" class="checkbox checkbox3"> 
 
    <input id="checkbox3" type="checkbox" role="checkbox" /><span class="custom">Checkbox 3</span> 
 
</label>

잘 모르겠어요 : 여기

는 작업 버전입니다

업데이트

왼쪽에 레이블을 표시하고 오른쪽에 확인란을 표시한다는 점에 주목하여 flexbox 모델을 사용하는 예제도 추가했습니다.

Answer 2

이 같은 것을보십시오 :

label { 
 
    display: inline-block; 
 
    text-align: right; 
 
}

<div class="block"> 
 
    <label>Simple label</label> 
 
    <input type="checkbox" /> 
 
</div>

Answer 3

당신이 준 코드은 opacity: 0과 실제 네이티브 체크 박스를 숨기고 다음 확인란이 선택 될 때 span.custom 요소의 background-color을 변경하려면 선택 :checked을 사용합니다.

귀하의 시도는 귀하가 말한 것과 정확히 일치합니다.

체크했을 때 파란색으로 바뀌는 영역 외부에 텍스트를 표시하려면 마크 업을 크게 변경하지 않고이 방법으로 작업 할 수 없으므로 확인란의 디자인을 완전히 다시 생각해야합니다. 전체 로직 그것이 작동하는 방식.

Answer 4

당신이 뭔가를 찾고 있다고 생각하니? 그래도 알기가 정말 어렵습니다. https://jsfiddle.net/tkuyxko4/1/

뭔가 변경하고 싶다면 아래의 설명을 참고하십시오.

HTML

<input id="checkbox1" type="checkbox" role="checkbox" /> 
<label for="checkbox1" class="checkbox">Checkbox 1</label> 

CSS

label { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
} 

input[type="checkbox"]:checked + label { 
    background-color: #0574ac; 
    border-radius: 3px; 
    border: 3px solid #fff; 
}