확인란과 해당 레이블을 일관되게 교차 브라우저에 정렬하는 방법
이것은 저를 끊임없이 괴롭히는 사소한 CSS 문제 중 하나입니다.
스택 오버플로 주변 사람들은 어떻게 수직적으로 정렬하고 일관된 크로스 브라우저를 사용합니까?
Safari에서 Safari 사용)vertical-align: baseline에서.input하지 않습니다.), IE에서는 IE에서 사용할 수 없습니다.
파이어폭스에서 고치면 사파리와 IE가 엉망이 될 수밖에 없습니다.저는 양식을 코딩할 때마다 이것에 시간을 낭비합니다.
다음은 제가 사용하는 표준 코드입니다.
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>저는 주로 Eric Meyer의 리셋을 사용하기 때문에 폼 요소는 오버라이드가 비교적 깨끗합니다.당신이 제공해야 하는 팁이나 요령을 기대하고 있습니다!
경고!이 대답은 너무 오래되어 최신 브라우저에서 작동하지 않습니다.
제가 이 답변의 포스터는 아니지만, 이 글을 작성할 당시 이 글은 찬성표와 반대표(+1035-17) 모두에서 단연코 가장 많은 표를 받은 답변이며, 여전히 받아들여진 답변으로 표시되어 있습니다(아마도 질문의 원래 포스터가 이 답변을 작성한 사람이기 때문일 것입니다).
코멘트에서 이미 여러 번 언급했듯이, 이 답변은 대부분의 브라우저에서 더 이상 작동하지 않습니다(2013년 이후로는 작동하지 않는 것으로 보입니다.
다른 스타일의 마크업을 조정하고, 테스트하고, 시도한 지 한 시간이 넘었는데, 괜찮은 해결책이 있을 것 같습니다.이 특정 프로젝트에 대한 요구사항은 다음과 같습니다.
- 입력은 자체 라인에 있어야 합니다.
- 확인란 입력은 모든 브라우저에서 유사하게(동일하지 않은 경우) 레이블 텍스트와 수직으로 정렬해야 합니다.
- 레이블 텍스트가 감기는 경우에는 들여쓰기해야 합니다(따라서 확인란 아래로 감기는 안 됩니다).
설명을 시작하기 전에 코드를 알려드리겠습니다.
label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>다음은 JSFidle의 작업 예제입니다.
이 코드는 폼 입력 마진과 패딩(따라서 입력 CSS에 마진과 패딩 재설정을 추가하지 않음)을 재정의하지 않는 Eric Meyer와 같은 재설정을 사용하고 있다고 가정합니다.실제 환경에서는 다른 입력 요소를 지원하기 위해 중첩/오버라이드할 수 있지만, 저는 단순하게 유지하고 싶었습니다.
주의할 사항:
- 그
*overflow선언은 인라인 IE 해킹(스타 속성 해킹)입니다.IE 6과 7 모두 이를 인식하지만 Safari와 Firefox는 이를 제대로 무시합니다.나는 그것이 유효한 CSS일 수도 있다고 생각하지만, 당신은 여전히 조건부 논평을 하는 것이 더 낫습니다. 단지 단순함을 위해 그것을 사용했습니다. - 한, 한 내가아한는, 한것은일유▁as.
vertical-align은 저간우일진술은된관에브라입니다.vertical-align: bottom이것을 설정한 다음 상대적으로 위쪽으로 위치시키는 것은 Safari, Firefox 및 IE에서 거의 동일하게 동작했지만 픽셀 1~2개 차이만 있었습니다. - 정렬 작업의 주요 문제는 IE가 입력 요소 주변에 신비로운 공간을 많이 붙인다는 것입니다.그것은 패딩이나 마진이 아닙니다. 그리고 그것은 지독하게 지속적입니다.를 설정한 "" " " " " 를 합니다.
overflow: hidden어떤 이유에서인지 여분의 공간을 차단하고 IE의 포지셔닝이 Safari 및 Firefox와 매우 유사하게 작동하도록 합니다. - 텍스트 크기에 따라 상대적인 위치, 너비, 높이 등을 조정하여 올바르게 표시해야 합니다.
제가 오늘 아침에 작업했던 프로젝트 외에 다른 프로젝트에서 이 특정 기술을 시도해 본 적이 없으니, 더 일관성 있게 작동하는 프로젝트를 찾는다면 반드시 파이프라인을 연결하십시오.
경고!이 대답은 너무 오래되어 최신 브라우저에서 작동하지 않습니다.
수직 정렬이 제대로 작동하려면 두 개의 인라인 요소(스팬, 레이블, 입력 등)가 서로 옆에 있어야 합니다.다음 확인란은 텍스트 크기가 매우 작거나 큰 경우에도 IE, Safari, FF 및 Chrome에서 수직으로 적절하게 중앙에 위치합니다.
이들은 모두 동일한 선에서 서로 옆으로 이동하지만, 현재 랩은 전체 레이블 텍스트가 항상 확인란 옆에 남아 있음을 의미합니다.
단점은 의미 없는 SPAN 태그입니다.
.checkboxes label {
display: inline-block;
padding-right: 10px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}<form>
<div class="checkboxes">
<label><input type="checkbox"> <span>Label text x</span></label>
<label><input type="checkbox"> <span>Label text y</span></label>
<label><input type="checkbox"> <span>Label text z</span></label>
</div>
</form>확인란 아래로 줄 바꿈 없이 랩핑해야 하는 매우 긴 레이블 텍스트가 있는 경우 레이블 요소에서 패딩과 음수 텍스트 들여쓰기를 사용합니다.
.checkboxes label {
display: block;
padding-right: 10px;
padding-left: 22px;
text-indent: -22px;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}<form>
<div class="checkboxes">
<label><input type="checkbox"> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
<label><input type="checkbox"> <span>Label text y</span></label>
<label><input type="checkbox"> <span>Label text z</span></label>
</div>
</form>One Crayon의 솔루션을 바탕으로 저에게 맞는 더 간단한 솔루션이 있습니다.
.font2 {font-family:Arial; font-size:32px} /* Sample font */
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
input[type=radio] {
bottom: 2px;
} <label><input type="checkbox" /> Label text</label>
<p class="font2">
<label><input type="checkbox"/> Label text</label>
</p>Safari(신뢰할 수 있는 기준)에서 픽셀 단위로 동일하게 렌더링하며 Firefox와 IE7 모두 정상으로 확인됩니다.또한 크고 작은 다양한 레이블 글꼴 크기에도 사용할 수 있습니다.선택과 입력에 대한 IE의 기준을 수정하려면...
업데이트: (타사 편집)
고의유.bottom글꼴 패밀리 및 글꼴 크기에 따라 위치가 달라집니다!확인란과 라디오 요소에 사용하는 것이 좋은 일반적인 가치라는 것을 알았습니다.Arial & Calibri 글꼴이 있는 창에서 여러 소형/중형/대형 글꼴 크기를 사용하여 Chrome/Firefox/IE11에서 테스트했습니다.
.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: .08em; /* this is a better value for different fonts! */
}<label><input type="checkbox" /> Label text</label>
<p class="font2">
<label><input type="checkbox"/> Label text</label>
</p>작동하기 쉬운 한 가지 방법은 수직 정렬을 사용하여 확인란의 수직 위치를 조정하는 것입니다.여전히 브라우저마다 다르겠지만 솔루션은 복잡하지 않습니다.
input {
vertical-align: -2px;
}
라해를 해 보다vertical-align: middle
또한 당신의 코드는 다음과 같아야 할 것 같습니다.
<form>
<div>
<input id="blah" type="checkbox"><label for="blah">Label text</label>
</div>
</form>제 솔루션을 사용해 보십시오. IE 6, FF2 및 Chrome에서 사용해 보았는데 세 브라우저 모두에서 픽셀 단위로 렌더링됩니다.
* {
padding: 0px;
margin: 0px;
}
#wb {
width: 15px;
height: 15px;
float: left;
}
#somelabel {
float: left;
padding-left: 3px;
}<div>
<input id="wb" type="checkbox" />
<label for="wb" id="somelabel">Web Browser</label>
</div>완벽하게 작동하는 유일한 솔루션은 다음과 같습니다.
input[type=checkbox], input[type=radio] {
vertical-align: -2px;
margin: 0;
padding: 0;
}
현재 Chrome, Firefox, Opera, IE 7 및 8에서 테스트되었습니다.예:피들
제 솔루션을 완전히 테스트하지는 않았지만, 잘 작동하는 것 같습니다.
HTML은 다음과 같습니다.
<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
그런 다음 모든 확인란을 다음으로 설정합니다.24px높이와 너비를 모두 고려하여텍스트를 정렬하려면 레이블을 사용합니다.line-height 한또.24px 및당할을 합니다.vertical-align: top; 예:
편집: IE 테스트 후 추가했습니다.vertical-align: bottom;입력으로 변경하고 레이블의 CSS를 변경했습니다.패딩을 분류하기 위해 조건부 IE css 대소문자가 필요할 수 있지만 텍스트와 상자는 인라인입니다.
input[type="checkbox"] {
width: 24px;
height: 24px;
vertical-align: bottom;
}
label.checkbox {
vertical-align: top;
line-height: 24px;
margin: 2px 0;
display: block;
height: 24px;
}<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>만약 이것이 작동하지 않는 것을 발견한 사람이 있다면, 저에게 친절하게 알려주시기 바랍니다.다음은 실행 중입니다(Chrome 및 IE에서 - 스크린샷이 레티나에서 촬영되고 IE에 대해 병렬을 사용하여 죄송합니다).
정적 텍스트의 수직 위치를 조정하기 위해 보통 선 높이를 사용합니다.
label {
line-height: 18px;
}
input {
width: 13px;
height: 18px;
font-size: 12px;
line-height: 12px;
}<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>도움이 되길 바랍니다.
마지막으로 문제의 원인을 살펴보겠습니다.
확인란은 이미지를 사용하여 렌더링됩니다(CSS를 통해 사용자 지정 이미지를 설정할 수 있음).다음은 DOM 검사기로 강조 표시된 FireFox의 (선택되지 않음) 확인란입니다.
Chrome에서도 동일한 비정형 확인란이 있습니다.
여백(주황색)을 볼 수 있습니다. 패딩이 없습니다(녹색으로 표시됨).그러면 확인란의 오른쪽과 아래에 있는 이 의사 여백은 무엇일까요?확인란에 사용되는 이미지의 일부입니다.그래서 그냥.vertical-align: middle그것만으로는 충분하지 않고, 그것이 크로스오버 문제의 근원입니다.
그래서 우리는 이것에 대해 무엇을 할 수 있을까요?
한 가지 분명한 옵션은 이미지를 교체하는 것입니다!다행히 CSS를 통해 이를 수행할 수 있으며 외부 이미지, base64(in-CSS) 이미지, in-CSS svg 또는 단지 유사 요소로 대체할 수 있습니다.이는 강력한(크로스 브라우저!) 접근 방식이며, 다음은 이 질문에서 삭제된 조정의 예입니다.
.checkbox-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
content: '';
display: inline-block;
background: #fff;
border-radius: 5px;
border: 2px solid #ddd;
vertical-align: middle;
width: 10px;
height: 10px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
width: 1px;
height: 5px;
border: solid blue;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-radius: 0px;
margin: 0px 15px 5px 5px;
}<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>여기에 나열된 것과 같은 스타일링에 대한 자세한 기사를 좀 더 읽고 싶을 수도 있습니다. 이 답변은 해당되지 않습니다.
좋아요, 그럼 커스텀 이미지 또는 유사 요소가 없는 솔루션은 어떻습니까?
TL;DR: 작동하지 않습니다. 대신 사용자 지정 확인란을 사용하십시오.
먼저, 다른 브라우저에서 확인란 내부의 의사 여백 아이콘이 임의적인 경우 일관된 해결책이 없습니다.하나를 구축하기 위해서는 기존 브라우저에서 이러한 이미지의 해부학적 구조를 탐구해야 합니다.
그렇다면 어떤 브라우저가 체크박스에 유사 마진을 가지고 있을까요?크롬 75, 비발디 2.5(크롬 기반), 파이어폭스 54(왜 그렇게 구식인지 묻지 마), IE 11, 엣지 42, 사파리?(1분 동안 하나를 선택하고 버전을 확인하는 것을 잊었습니다.)크롬과 비발디만이 그러한 유사 마진을 가지고 있습니다(오페라와 같은 크롬 기반의 모든 브라우저도 의심됩니다).
그 가짜 마진들의 크기는?이 문제를 해결하려면 확대 확인란을 사용할 수 있습니다.
input {
zoom: 10;
box-shadow: 0 0 1px inset #999;
}<input type=checkbox>결과는 폭/높이의 ~7%이므로 절대 단위로 0.9-1.0인치입니다.의문이 들 수 . 을 사용해 . 다른 값을 사용해 보십시오.zoom확인란을 선택합니다. 제 는 크과비모발롬두대에한내테의스다다니릅매크우상기는대적마에서 매우 .zoom 10,및값값 10, 20 및 11-19(??):
scale보다 일관성이 있는 것 같습니다.
input {
transform: scale(10) translate(50%, 50%);
box-shadow: 0 0 1px inset #999;
}<input type=checkbox>그래서 아마도 ~14%와 2ppm이 정확한 값일 것입니다.
이제 의사 여백의 크기(?)를 알았으므로 이 값으로는 충분하지 않습니다.확인란 아이콘의 크기가 모든 브라우저에서 동일합니까?아아! 다음은 DOM 검사자가 스타일이 지정되지 않은 확인란에 대해 표시하는 내용입니다.
- FireFox: 13.3px
- 크롬 기반: 전체에 대해 12.8ppm, 따라서 12.8ppm(100% - 14%) = 육안으로 확인할 수 있는 확인란에 대해 11ppm
- IE 11, 가장자리: 13px
- Safari: n/a (같은 화면에서 비교해야 한다고 생각합니다.)
이제 솔루션이나 트릭에 대해 논의하기 전에, 올바른 정렬이란 무엇입니까?우리가 성취하고자 하는 것은 무엇입니까?어느 정도는 취향의 문제이지만 기본적으로 다음과 같은 "멋진" 정렬의 측면을 생각할 수 있습니다.
동일한 기준선에 있는 텍스트 및 확인란(여기서는 일부러 확인란 크기를 조정하지 않음):
또는 소문자의 중간선이 같음:
또는 대문자와 같은 중간선(글꼴 크기에 따라 차이를 더 쉽게 확인할 수 있음):
또한 확인란의 크기가 소문자, 대문자 또는 다른 문자(소문자, 작은 문자 또는 소문자와 대문자 사이)의 높이와 같아야 하는지 여부를 결정해야 합니다.
이 토론에서는 확인란이 텍스트와 동일한 기준선에 있고 대문자 크기(매우 논쟁의 여지가 있는 선택)인 경우 정렬을 nice라고 부릅니다.
이제 다음과 같은 툴이 필요합니다.
- 확인란 크기 조정
- 유사 테두리 확인란으로 크롬을 인식하고 특정 스타일을 설정합니다.
- 확인란/레이블 수직 정렬 조정
?
확인란 크기 조정 관련: 다음이 있습니다.
width,height,size,zoom,scale(내가 무언가를 놓쳤습니까?)zoom그리고.scale절대 크기를 설정할 수 없으므로 브라우저별 규칙을 작성할 수 없는 경우 교차 검색 크기를 설정하지 않고 텍스트 크기를 조정하는 데만 도움이 될 수 있습니다.sizeChrome에서는 작동하지 않습니다(이전 IE에서도 작동했습니까? 어쨌든, 그렇게 흥미롭지는 않습니다).width그리고.heightChrome과 다른 브라우저에서 작동하므로 공통 크기를 설정할 수 있지만, Chrome에서는 확인란 자체가 아니라 전체 이미지의 크기를 설정합니다.참고: 확인란의 크기를 정의하는 최소(폭, 높이)입니다(폭 ≠ 높이인 경우 확인란 사각형 외부 영역이 "의사 여백"에 추가됩니다).불행한 것은, Chrome 체크박스의 의사 여백이 제가 볼 수 있는 한 폭과 높이에 대해 0으로 설정되어 있지 않다는 것입니다.
수직 정렬을 고려해 보겠습니다.
vertical-align▁set로 설정하면 일관된 를 얻을.middle또는baseline에, 동일한 "시스템"을을 크의유마진좌때에문을대동해에시템스일한다저니실얻유한는일제것입옵션라은정는벨과표하력렬입을롬모든우라브사▁the▁and좌▁label"▁because▁to을▁to▁to다▁the▁align니inate것▁systemcoord▁input입▁for▁real-▁thegin▁option▁of는하s정▁chrome▁the에 정렬하는 것입니다.top:
(그림: 수직-정렬: 상자 모양 없이 위, 아래 및 아래)
그러면 우리는 이것으로부터 어떤 결과를 얻을 수 있을까요?
input[type="checkbox"] {
height: 0.95em;
width: 0.95em;
}
label, input {
vertical-align: top;
}<label><input type="checkbox">label</label>위의 코드 조각은 Chrome(Chromium 기반 브라우저)에서 작동하지만 다른 브라우저에서는 더 작은 크기의 확인란이 필요합니다.크기와 수직 정렬을 모두 크롬의 체크박스 이미지와 같은 방식으로 조정하는 것은 불가능할 것 같습니다.제 마지막 제안은: 대신 사용자 지정 확인란을 사용하는 것입니다. 그러면 좌절을 피할 수 있을 것입니다. :)
이제 모든 최신 브라우저에서 플렉스박스가 지원되기 때문에 이런 접근법이 더 쉬워 보입니다.
<style>
label {
display: flex;
align-items: center;
}
input[type=radio], input[type=checkbox]{
flex: none;
}
</style>
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>
다음은 완전한 접두사 버전 데모입니다.
label {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
input[type=radio],
input[type=checkbox] {
-webkit-box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
margin-right: 10px;
}
/* demo only (to show alignment) */
form {
max-width: 200px
}<form>
<label>
<input type="radio" checked>
I am an aligned radio and label
</label>
<label>
<input type="checkbox" checked>
I am an aligned checkbox and label
</label>
</form><form>
<div>
<label style="display: inline-block">
<input style="vertical-align: middle" type="checkbox" />
<span style="vertical-align: middle">Label text</span>
</label>
</div>
</form>이 방법은 테이블 셀에서만 수직 정렬을 사용하거나 레이블 태그를 사용하는 경우 인라인 블록에서만 사용하는 것입니다.
이것이 가장 쉬운 방법이라고 생각합니다.
input {
position: relative;
top: 1px;
}<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
<form>저는 상대적인 위치 설정을 좋아하지 않습니다. 왜냐하면 그것은 다른 모든 것보다 더 높은 수준으로 렌더링되는 요소를 만들기 때문입니다(복잡한 레이아웃이 있는 경우 어떤 것 위에 배치될 수 있습니다).
그것을 했습니다.vertical-align: subChrome, Firefox 및 Opera에서 정렬된 확인란을 보기 좋게 만듭니다.저는 MacOS가 없고 IE10이 약간 꺼져 있어서 Safari를 확인할 수 없지만, 저는 그것이 저에게 충분한 해결책이라는 것을 알았습니다.
또 다른 해결책은 모든 브라우저에 대해 특정 CSS를 만들고 %/pixels/EM의 일부 수직 정렬로 미세 조정하는 것입니다. http://css-tricks.com/snippets/css/browser-specific-hacks/
이것은 나에게 잘 맞습니다.
fieldset {
text-align:left;
border:none
}
fieldset ol, fieldset ul {
padding:0;
list-style:none
}
fieldset li {
padding-bottom:1.5em;
float:none;
clear:left
}
label {
float:left;
width:7em;
margin-right:1em
}
fieldset.checkboxes li {
clear:both;
padding:.75em
}
fieldset.checkboxes label {
margin:0 0 0 1em;
width:20em
}
fieldset.checkboxes input {
float:left
}<form>
<fieldset class="checkboxes">
<ul>
<li>
<input type="checkbox" name="happy" value="yep" id="happy" />
<label for="happy">Happy?</label>
</li>
<li>
<input type="checkbox" name="hungry" value="yep" id="hungry" />
<label for="hungry">Hungry?</label>
</li>
</ul>
</fieldset>
</form>Chrome 28 OSX에서는 400개 이상의 업보가 포함된 선택된 답변이 작동하지 않았습니다. 아마도 OSX에서 테스트되지 않았거나 이 질문에 답했을 때 2008년에 주변에서 작동했기 때문일 것입니다.
시대가 변했고, 새로운 CSS3 솔루션이 이제 실현 가능합니다.내 솔루션은 유사 요소를 사용하여 사용자 정의 확인란을 만듭니다.따라서 조항(찬성이든 반대든)은 다음과 같습니다.
- 최신 브라우저(FF3.6+, IE9+, Chrome, Safari)에서만 작동합니다.
- 모든 브라우저/OS에서 정확히 동일하게 렌더링되는 사용자 지정된 확인란에 의존합니다.여기서는 단순한 색상을 몇 가지 선택했지만 선형 그라데이션 등을 추가하여 더 크게 만들 수 있습니다.
- 특정 글꼴/글꼴 크기에 맞게 조정되며, 변경된 경우 확인란의 위치와 크기를 변경하여 세로로 정렬된 것처럼 보이게 할 수 있습니다.올바르게 조정된 경우 최종 결과는 모든 브라우저/운영 체제에서 정확히 동일해야 합니다.
- 수직 정렬 특성 없음, 부동액 없음
- 제 예에서 제공된 마크업을 사용해야 합니다. 질문처럼 구성되면 작동하지 않습니다. 그러나 레이아웃은 기본적으로 동일하게 보입니다.만약 당신이 물건들을 옮기고 싶다면, 당신은 또한 관련된 CSS를 옮겨야 할 것입니다.
div.checkbox {
position: relative;
font-family: Arial;
font-size: 13px;
}
label {
position: relative;
padding-left: 16px;
}
label::before {
content :"";
display: inline-block;
width: 10px;
height: 10px;
background-color: white;
border: solid 1px #9C9C9C;
position: absolute;
top: 1px;
left: 0px;
}
label::after {
content:"";
width: 8px;
height: 8px;
background-color: #666666;
position: absolute;
left: 2px;
top: 3px;
display: none;
}
input[type=checkbox] {
visibility: hidden;
position: absolute;
}
input[type=checkbox]:checked + label::after {
display: block;
}
input[type=checkbox]:active + label::before {
background-color: #DDDDDD;
}<form>
<div class="checkbox">
<input id="check_me" type=checkbox />
<label for="check_me">Label for checkbox</label>
</div>
</form>이 솔루션은 확인란을 숨기고 레이블에 유사 요소를 추가하고 스타일을 지정하여 표시되는 확인란을 만듭니다.레이블은 숨겨진 확인란에 연결되어 있으므로 입력 필드는 계속 업데이트되고 값은 양식과 함께 제출됩니다.
그리고 관심이 있으시다면 라디오 버튼에 대한 저의 견해를 말씀드리겠습니다. http://jsfiddle.net/DtKrV/2/
누군가 이것이 유용하다고 생각하기를 바랍니다!
ASP를 사용하는 경우.NET 웹 양식 DIV 및 기타 요소 또는 고정 크기에 대해 걱정할 필요가 없습니다.정렬할 수 있습니다.<asp:CheckBoxList>정별텍트스를 설정하여 합니다.float:leftCSS의 CheckboxList 입력 유형으로 이동합니다.
다음 예제 코드를 확인하십시오.
.CheckboxList
{
font-size: 14px;
color: #333333;
}
.CheckboxList input
{
float: left;
clear: both;
}
.ASPX 코드:
<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>
이렇게 하는 데 문제가 있었던 적은 없습니다.
<form>
<div>
<input type="checkbox" id="cb" /> <label for="cb">Label text</label>
</div>
</form>
입력 유형 확인란이 레이블 내부에 감싸여 있고 다음과 같이 왼쪽으로 이동합니다.
<label for="id" class="checkbox">
<input type="checkbox" id="id">
<span>The Label</span>
</label>
이것은 나에게 효과가 있었습니다.
label.checkbox {
display: block;
}
.checkbox input {
float: left;
height: 18px;
vertical-align: middle;
}
.checkbox span {
float: left;
line-height: 18px;
margin: 0 0 0 20px;
}
의 높이가 (블록 레벨)의 선 높이와 동일한지 확인합니다.
input[type=checkbox]
{
vertical-align: middle;
} <input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>보통 확인란에 레이블을 지정하지 않은 상태로 두고 "레이블"을 별도의 요소로 만듭니다.번거롭지만, 확인란과 해당 레이블이 표시되는 방식 사이에는 브라우저 간에 차이가 너무 많아서 이 방법으로 모든 것을 제어할 수 있습니다.
저는 또한 같은 이유로 윈폼 개발에서도 이 일을 하게 됩니다.체크박스 컨트롤의 근본적인 문제는 박스와 라벨이라는 두 가지 컨트롤이 실제로 다르다는 것입니다.확인란을 사용하면 컨트롤의 구현자가 두 요소를 서로 나란히 표시하는 방법을 결정할 수 있습니다(그리고 항상 잘못된 부분=원하는 부분이 아님).
당신의 질문에 누군가가 더 나은 대답을 하기를 바랍니다.
Bootstrap을 에는 Twitter Bootstrap을 .checkbox의 <label>:
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
CSS:
.threeCol .listItem {
width:13.9em;
padding:.2em;
margin:.2em;
float:left;
border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
float:left;
width:auto;
margin:.2em .2em .2em 0;
border:none;
background:none;
}
.threeCol label {
float:left;
margin:.1em 0 .1em 0;
}
HTML:
<div class="threeCol">
<div class="listItem">
<input type="checkbox" name="name" id="id" value="checkbox1" />
<label for="name">This is your checkBox</label>
</div>
</div>
위의 코드는 목록 항목을 세 가지 색상으로 배치하고 그에 맞게 너비만 변경합니다.
확인란의 높이와 너비를 하드 코딩하고, 패딩을 제거한 다음, 확인란의 높이와 수직 여백을 레이블의 선 높이와 동일하게 합니다.레이블 텍스트가 인라인인 경우 확인란을 이동합니다.Firefox, Chrome 및 IE7+는 모두 다음 예제를 동일하게 렌더링합니다. http://www.kornea.com/css-checkbox-align
단하게사용을 합니다.vertical-align: sub포크리슈카가 이미 제안한 것처럼.
HTML 코드:
<div class="checkboxes">
<label for="check1">Test</label>
<input id="check1" type="checkbox"></input>
</div>
CSS 코드:
.checkboxes input {
vertical-align: sub;
}
다음은 IE9를 포함한 브라우저에서 픽셀 단위로 완벽한 일관성을 제공합니다.
이 접근 방식은 매우 합리적이며, 명백할 정도입니다.
- 입력 및 레이블을 만듭니다.
- 원하는 대로 띄울 수 있도록 블록으로 표시합니다.
- 높이와 선 높이를 동일한 값으로 설정하여 중심을 잡고 수직으로 정렬합니다.
- em 측정의 경우 요소의 높이를 계산하려면 브라우저가 해당 요소의 글꼴 높이를 알아야 하며 자체적으로 em 측정에서 설정해서는 안 됩니다.
따라서 전체적으로 적용 가능한 일반 규칙이 생성됩니다.
input, label {display:block;float:left;height:1em;line-height:1em;}
폼, 필드 세트 또는 요소의 글꼴 크기를 조정할 수 있습니다.
#myform input, #myform label {font-size:20px;}
Mac, Windows, Iphone 및 Android에서 최신 Chrome, Safari 및 Firefox에서 테스트되었습니다.그리고 IE9.
이 방법은 텍스트 줄이 한 줄 이하인 모든 입력 유형에 적용할 수 있습니다.적합한 유형 규칙을 적용합니다.
그래서 저는 이것이 여러 번 답변을 받았다는 것을 알고 있지만, 저는 이미 제공된 것보다 훨씬 더 우아한 해결책을 가지고 있다고 생각합니다.단 하나의 우아한 솔루션뿐만 아니라 두 개의 개별 솔루션으로 여러분의 마음을 사로잡을 수 있습니다.그렇기 때문에, 당신이 알고 봐야 할 모든 것은 댓글과 함께 2개의 JS Fiddle에 포함되어 있습니다.
솔루션 #1은 지정된 브라우저의 기본 "체크박스"에 의존하지만, 그 이유는...오버플로와 함께 크로스 브라우저를 배치하기 쉬운 div에 포함되어 있습니다: 1px 확장 확인란의 초과를 자르기 위해 숨김(FF의 못생긴 경계를 볼 수 없도록 함).
간단한 HTML: (링크를 따라 주석이 있는 CSS를 검토합니다. 코드 블록은 스택 오버플로를 충족합니다.) http://jsfiddle.net/KQghJ/
<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>
솔루션 #2는 "Checkbox Toggle Hack"을 사용하여 브라우저 전체에 걸쳐 올바르게 배치된 DIV의 CSS 상태를 전환하고 확인란 및 확인란 상태에 대한 간단한 스프라이트로 설정합니다.필요한 것은 위의 체크박스 토글 해킹으로 배경 위치를 조정하는 것입니다.제 생각에, 이것은 당신이 당신의 체크박스와 라디오를 더 잘 제어할 수 있고 브라우저에서 그것들이 동일하게 보이도록 보장할 수 있기 때문에 더 우아한 해결책입니다.
간단한 HTML: (링크를 따라 주석이 있는 CSS를 검토합니다. 코드 블록은 StackOverflow를 충족합니다.) http://jsfiddle.net/Sx5M2/
<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>
이러한 방법에 동의하지 않는 사람이 있다면 의견을 남겨 주십시오. 다른 사람들이 이러한 해결책을 발견하지 못한 이유에 대한 피드백을 듣고 싶습니다. 또는 해결책에 대한 답변이 없는 이유는 무엇입니까?이러한 방법 중 하나가 실패하는 것을 보는 사람이 있다면 그것도 볼 수 있으면 좋겠지만, 이것들은 최신 브라우저에서 테스트되었으며 제가 본 바로는 꽤 오래되고 보편적인 HTML/CSS 방법에 의존합니다.
이것은 문제를 해결하는 최선의 방법이 아닙니다.
vertical-align: middle
추가하기style="position:relative;top:2px;"하면 아래로 합니다.2px따라서 글꼴 크기에 따라 이동할 수 있습니다.
position: relative; 및 z-index(jQuery) slideUp/slideDown과 같은 과 관련하여 에 몇 .
CSS:
input[type=checkbox], input[type=radio] {
vertical-align: baseline;
position: relative;
top: 3px;
margin: 0 3px 0 0;
padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
vertical-align: middle;
position: static;
margin-bottom: -2px;
height: 13px;
width: 13px;
}
jQuery:
$(document).ready(function () {
if ($.browser.msie && $.browser.version <= 7) {
$('input[type=checkbox]').addClass('ie7');
$('input[type=radio]').addClass('ie7');
}
});
사용된 글꼴 크기에 따라 스타일 조정이 필요할 수 있습니다.<label>
PS:
저는 IE6에서 css를 작동시키기 위해 i7js를 사용합니다.
가장 간단한 해결책은
input {
vertical-align: text-top;
}언급URL : https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers
'programing' 카테고리의 다른 글
| 어떻게 pip3를 업그레이드합니까? (0) | 2023.05.01 |
|---|---|
| 데이터와 함께 mongodb 데이터베이스 복사/클론 (0) | 2023.05.01 |
| 파이썬 스와핑 이해: a, b = b, a가 항상 b, a = a, b와 같지 않은 이유는 무엇입니까? (0) | 2023.05.01 |
| PSQL의 DECTION 및 NUMERICAL 데이터 유형 간의 차이 (0) | 2023.05.01 |
| NSString에서 모든 공백 제거 (0) | 2023.04.26 |