맞추는 방법을 확인하고 그들의 라벨을 일관되게 크로스 브라우저
-
08-07-2019 - |
문제
이것은 하나의 작은 CSS 문제는 나를 괴롭히다.어떻게 사람들이 주변에 Stack Overflow 수직으로 정렬 checkboxes
과 그들의 labels
일관 크로스 브라우저?때마다 나는 그들을 정렬에서 올바르게 사파리(일반적으로 사용 vertical-align: baseline
에 input
다),그들은 완전히 떨어져에서 Firefox/IE.그것을 해결 Firefox,Safari and IE 는 필연적으로 엉망입니다.나에 시간을 낭비 때마다 이것 저는 코드 형태입니다.
여기에는 표준 코드는 일:
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>
나는 일반적으로 사용하는 에릭 메이어의 다시 설정,그래서 형태 요소는 상대적으로 청소의 무시합니다.앞으로 찾고 어떤 조언이나 기술을 제공합니다!
해결책
후에는 시간 이상의 조정,테스트하고,다른 스타일의 태그,내가 생각하기에도 알맞은 솔루션입니다.에 대한 요구 사항 이 특정 프로젝트었:
- 입력에 있어야 합니다 자신의 라인입니다.
- 체크 박스 입력이 필요하 수직으로 정렬된 레이블 텍스트 마찬가지로(하지 않을 경우 동일하게)모든 브라우저입니다.
- 는 경우에 레이블 텍스트,그것은 필요하게 들여쓰기(그래서 아무도 감싸는 아래 checkbox).
내가 들어가기 전에 모든 설명,난 그냥 당신에게 코드:
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>
여기에서 동작하는 예제에서 JSFiddle.
이 코드에서는 당신이 사용하는 재설정을 다음과 같 에릭 메이어의하지 않는 재정의 양식에 입력한 여백과 패딩(따라서 넣어진 패딩 재설정 입력에서 CSS).물론 실제 환경에서 당신은 아마다 중첩/재정의 물건을 지원하는 다른 요소를 입력하지만,나는 유지하고 싶었던 것들을 간단합니다.
참고하기:
- 이
*overflow
선입 인라인 IE 해킹(별성 해킹).모두 IE6 7 다는 것을 알 수 있지만,Safari,Firefox 것이 제대로 그것을 무시합니다.나는 그것이 유효하게 처리할 수 있습 CSS,하지만 당신은 여전히 더 좋은 조건부 의견;단지 그것을 사용해 단순합니다. - 내가 말할 수 있는 최선을만
vertical-align
문을 통해 일관된 브라우저vertical-align: bottom
.설정이 다음 상대적으로 포지셔닝을 위쪽으로 행동하는 거의 동일하게 in Safari,Firefox,IE 만으로도 화소 또는 두 개의 차이가 있습니다. - 주요 문제에서 작업으로 정렬하는 IE 지팡이 무리한 공간을 주위 입력이 요소입니다.그렇지 않은 패딩 또는 여백 그리고 그것은 저주 영구적입니다.설정의 너비와 높이에서 확인란을 선택하고 다음
overflow: hidden
어떤 이유로 인하 여분의 공간 및 수 있습 IE 의 위치하는 행위는 매우 유사하게 사파리와어 있습니다. - 에 따라 텍스트 크기,당신은 의심의 여지가 조정이 필요한 상대적인 위치,너비,높이 및 등을 얻을 것을 찾는 옳습니다.
희망이 누군가가 도움이 됩니다.내가 시도하지 않은 이 특정한 기술에서 어떤 프로젝트를 다른 것보다 나는 이 일에 아침,그래서 확실히 관는 경우에 당신이 뭔가를 찾을 작동하는 더 일정하게 유지되었습니다.
다른 팁
때로는 수직 정렬에 제대로 작동하기 위해 서로 옆에 두 개의 인라인 (스팬, 레이블, 입력 등) 요소가 필요합니다. 다음 확인란은 텍스트 크기가 매우 작거나 큰 경우에도 IE, Safari, FF 및 Chrome의 수직 중앙에 올바르게 중앙에 있습니다.
그들은 모두 같은 줄에서 서로 옆에 떠 다니지 만 Nowrap은 전체 레이블 텍스트가 항상 확인란 옆에 머무는 것을 의미합니다.
단점은 추가 무의미한 스팬 태그입니다.
.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 for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
<label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
<label for="z"><input type="checkbox" id="z" /> <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 for="x"><input type="checkbox" id="x" /> <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 for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
<label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
</div>
</form>
작업 하나의 크레용 솔루션, 나는 나를 위해 일하는 것이 있고 더 간단합니다.
.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은 모두 잘 확인합니다. 또한 크고 작은 다양한 레이블 글꼴 크기에도 적용됩니다. 이제 Selects and Inputs에서 IE의 기준선을 수정하기 위해 ...
업데이트: (타사 편집)
적절한 bottom
위치는 글꼴 가족과 글꼴 크기에 따라 다릅니다! 사용을 찾았습니다 bottom: .08em;
Checkbox & Radio Elements는 좋은 일반적인 가치입니다. 여러 개의 소형/중간/큰 글꼴 크기를 사용하여 Arial & Calibri Fonts가있는 Windows에서 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에서 시도해 보았으며 3 개의 브라우저 모두에서 픽셀로 픽셀을 렌더링합니다.
* {
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에서 오늘 테스트했습니다. 예 : 예 : 깡깡이
정적 텍스트의 수직 위치를 조정하기 위해 일반적으로 선 높이를 사용합니다.
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>
도움이되기를 바랍니다.
솔루션을 완전히 테스트하지는 않았지만 잘 작동하는 것 같습니다.
내 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;
}
누군가가 작동하지 않는다는 것을 알게되면 친절하게 알려주세요. 다음은 작동 중입니다 (Chrome 및 IE에서는 스크린 샷이 망막에서 찍히고 IE에 대한 평행선을 사용하여 사과) : :
나는 이것이 가장 쉬운 방법이라고 생각합니다
input {
position: relative;
top: 1px;
}
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
<form>
이것은 나에게 잘 작동합니다.
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>
나는 상대적 포지셔닝이 마음에 들지 않습니다. 왜냐하면 요소가 레벨에서 다른 모든 것 이상으로 렌더링되기 때문입니다 (복잡한 레이아웃이있는 경우 무언가 위에 올 수 있음).
나는 그것을 발견했다 vertical-align: sub
Checkbox를 크롬, 파이어 폭스 및 오페라에서 충분히 잘 정렬하게 보이게합니다. MacOS가없고 IE10이 약간 꺼져 있으므로 Safari를 확인할 수는 없지만 나에게 충분한 솔루션이라는 것을 알았습니다.
또 다른 솔루션은 모든 브라우저에 대해 특정 CSS를 만들고 %/픽셀/EMS의 수직 정렬로 미세 조정하는 것일 수 있습니다.http://css-tricks.com/snippets/css/browser-specific-hacks/
이제 Flexbox는 모든 현대식 브라우저에서 지원되었습니다. 이와 같은 것은 나에게 더 쉬운 접근 방식처럼 보입니다.
<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>
<input type="checkbox" id="cb" /> <label for="cb">Label text</label>
</div>
</form>
라벨의 'for'속성에 대한 토론에 추가하고 싶었습니다 (약간 offtopic).
JavaScript에서 사용하기에 매우 편리하기 때문에 필요하지 않은 경우에도 공급하십시오.
var label = ...
var input = document.getElementById(label.htmlFor);
라벨에 입력이 중첩되어 있거나 입력이 라벨 앞에 있거나 후에 등장하는 것 등을 파악하는 것보다 훨씬 더 편리합니다.
내 2 센트.
사용하는 경우 ASP.NET 웹 양식 DIV 및 기타 요소 또는 고정 크기에 대해 걱정할 필요가 없습니다. 우리는 정렬 할 수 있습니다 <asp:CheckBoxList>
설정하여 텍스트 float:left
CSS의 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>
400 개 이상의 Upvotes로 선택한 답변은 Chrome 28 OSX에서 저에게 효과가 없었습니다. 아마도 OSX에서 테스트되지 않았 거나이 질문에 대한 답변이있을 때 2008 년에 어떤 일이 있었는지 작동했기 때문일 것입니다.
타임즈가 바뀌었고 새로운 CSS3 솔루션이 가능합니다. 내 솔루션이 사용됩니다 유사 요소 a 사용자 정의 확인란. 따라서 규정 (장단점 또는 단점이지만보고 있음)은 다음과 같습니다.
- 현대식 브라우저 (FF3.6+, IE9+, Chrome, Safari)에서만 작동합니다.
- 모든 브라우저/OS에서 정확히 동일하게 렌더링되는 사용자 정의 설계 확인란에 의존합니다. 여기서는 간단한 색상을 선택했지만 항상 선형 그라디언트 등을 추가하여 더 많은 뱅을 줄 수 있습니다.
- 특정 글꼴/글꼴 크기에 맞춰져 있습니다. 변경하면 확인란의 위치와 크기를 변경하여 수직으로 정렬 된 것처럼 보이게합니다. 올바르게 조정하면 최종 결과는 모든 브라우저 / 운영 체제에서 정확히 동일해야합니다.
- 수직 정렬 특성, 플로트 없음
- 내 예제에서 제공된 마크 업을 사용해야합니다. 질문처럼 구성된 경우 작동하지 않지만 레이아웃은 본질적으로 동일하게 보입니다. 물건을 움직이고 싶다면 관련 CSS도 움직여야합니다.
귀하의 HTML :
<form>
<div class="checkbox">
<input id="check_me" type=checkbox />
<label for="check_me">Label for checkbox</label>
</div>
</form>
귀하의 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;
}
이 솔루션 확인란을 숨 깁니다, 가시적 확인란을 만들기 위해 라벨에 의사 요소를 추가하고 스타일을 추가합니다. 레이블이 숨겨진 확인란에 묶여 있으므로 입력 필드가 여전히 업데이트되고 값은 양식으로 제출됩니다.
jsfiddle : http://jsfiddle.net/sgxyy/6/
관심이 있으시면 여기에 라디오 버튼이 있습니다. http://jsfiddle.net/dtkrv/2/
누군가가 이것이 유용하다는 것을 알기를 바랍니다!
Twitter Bootstrap을 사용하는 경우 checkbox
클래스 <label>
:
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
체크 박스의 높이와 너비를 하드 코드하고 패딩을 제거하고 높이와 수직 마진을 라벨의 선장과 동일하게 만듭니다. 레이블 텍스트가 인라인 인 경우 확인란을 둡니다. Firefox, Chrome 및 IE7+는 모두 다음 예를 동일하게 렌더링합니다. http://www.kornea.com/css-checkbox-align
<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>
트릭은 라벨 태그를 사용하는 경우 테이블 셀 또는 인라인 블록에서만 세로 정렬을 사용하는 것입니다.
입력 유형 확인란이 레이블 내부에 감싸고 왼쪽으로 떠 다니면서 :
<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>
자 마지막으로 살펴 문제의 원
체크 박스를 사용하여 렌더링 이미지(하나는 수정 사용자들을 통해 CSS).여기에는(체크)체크박스에서는 파이어폭스,로 강조 DOM inspector:
그리고 여기에는 동일한 스타일이 적용되지 않은 체크박스에서는 Chrome:
당신이 볼 수익(주황색);패딩은 존재하지 않는(것 같 녹색).그래서 무엇이 의사의 수익에서 오른쪽 하단에서의 확인란? 이러한 부분의 이미지를 사용에 대한 확인란.을 사용하는 이유만 vertical-align: middle
지 않는 정말 충분 그리고 그의 원인 크로스 브라우저는 문제입니다.
그래서 우리는 무엇을 할 수 있을까요?
중 하나는 명백한 옵션은–바꿉니다.다행히 하나를 통해이 작업을 수행 할 수 있습니다 CSS 및 교체를 가진 사람들이 외부 이미지,base64(에서 CSS)이미지에서 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>
할 수 있습니다 더 깊이있는 기사에 대한 스타일링처럼 나열 기;그것의 범위 밖의 이 대답이다.
Ok,여전히 무엇에 대해 no-사용자 정의 이미지 또는 의사소 솔루션?
TL;박사:이처럼 보이는 작동하지 않습니다,사용자 정의 체크 박스를 사용하여 대신
첫째,하자의 통지하는 경우 다른 브라우저에서 그 의사는 여백부 확인 아이콘이었다 임의적이 없었다는 일관된 솔루션입니다.하나를 구축하고,우리의 해부학을 탐구한 이미지를 기존의 브라우저입니다.
그래서 브라우저는 무엇입니까 하는 의 여백을 확인란?나는 체크아웃 크롬 75,비발디 2.5(크롬 기반),FireFox54(지 않는 이유를 물어 이 같은 오래된),IE11,가장자리에 42,Safari??(빌리는 한 분을 위해,잊을 확인 버전)입니다.만 크롬과 비발디에는 그러한 의사익(내가 의심되는 모든 크롬의 브라우저 뿐만 아니라,오페라).
What's 크기는 사람들의 의사윤?그 이 밖으로 하나를 사용할 수 있습 확대 checkbox:
input {
zoom: 10;
box-shadow: 0 0 1px inset #999;
}
<input type=checkbox>
내 결과입니다~7%의 폭을 높이고,따라서 0.9-1.0px 에서 절대적인 단위입니다.정확도는 질문을 받을 수 있도다른 값의 zoom
에 대한 확인란을 선택합니다.내 테스트에서 모두에서 Chrome 및 비발디의 상대적 크기에 의 여백은 매우 다양서 zoom
값 10,20 에서 값 11-19(??):
scale
더 많은 것 같다 일관성 있:
input {
transform: scale(10) translate(50%, 50%);
box-shadow: 0 0 1px inset #999;
}
<input type=checkbox>
그래서 아마~14%2px 는 올바른 값입니다.
지금 우리가 알고 있는(?) 의 크기를 의사의 수익자의 참고 이것으로는 충분하지 않습니다.은 크기의 checkbox 아이콘에 대해 동일한 모두 브라우저?다!여기에 무엇 DOM inspector shows 한 스타일이 적용되지 않은 체크박스:
- FireFox: 13.3px
- 크롬 기반: 12.8px 에 대한 모든 것,따라서 12.8(100%-14%)= 11px 무엇을 위해 시각적으로 인식된 확인란
- IE11,가장자리: 13px
- Safari:n/a(이러한과 비교될 수 있습니다.같은 화면에서,믿)
지금 우리가 논의하기 전에 모든 솔루션 또는 트릭 질문하자:은 무엇인 정 맞춤?우리는 무엇을 하려고 달성하기 위해?특정 시점의 맛의 문제,그러나 기본적으로 생각할 수 있는 다음과 같은"좋은"선형의 측면:
텍스트와 확인란에서 동일한 기준(의도적으로하지 않는 조정 체크 박스 크기가 여기):
거나 같은 중인 측면에서의 소문자:
또 동일 중인 측면에서 자본의 문자(의 차이에 대한 다른 글꼴 크기):
그리고 또한 우리는지 여부를 결정해야의 크기를 확인해야의 높이와 동일한 소문자,대문자 또는 다른 뭔가가(더 크고,더 작은 사이 또는 소문자로 및 자).
이에 대한 토론자 전화를 정렬하면 좋을 확인란의 선택에 동일한 기준으로 텍스트와 크기에도 편지(매우 논쟁의 여지가 선택):
이 도구는 무엇인가:
- 조정 체크 박스 크기
- 인식 크롬과 의사장자리를 붙인 확인란을 선택하고 설정된 특정한 스타일
- 조정 체크 박스/레이블 수직 정렬
?
에 관한 체크 박스 크기 조정:가
width
,height
,size
,zoom
,scale
(가 나는 뭔가?).zoom
고scale
지를 설정할 수 있습니다 절대 크기,그래서 그들은 도움이 될 수 있습만으로 조정하는 텍스트 크기를 설정하지 않은 크로스 브라우저 크기(지 않으면 우리는 쓸 수 있는 브라우저는 특정 규칙).size
으로 작동하지 않는 크롬(았다 그것은 오래된 IE?어쨌든,그것은 흥미로운).width
고height
롬에서 작동하고 다른 브라우저를 설정할 수 있습니다 일반적인 크기만,다시,크롬에서 그것은 세트의 크기,전체 이미지지 않는 체크박스 자체입니다.참고:그것은 최소한(폭,높이)정의하는 확인란의 크기는(있을 경우 폭≠높이는 외부 영역을 확인란 광장에 추가하"의사률").불행한 것은,의사는 여백에서 크롬 확인란을 설정하지 않은 영을 위해 어떤 폭과 높이를,멀리로 나가 볼 수 있습니다.
나는 두려워 없 신뢰성 CSS 유일한 방법 이러한 일입니다.
하자 고려는 수직 정렬.
vertical-align
줄 수 없는 일관된 결과를 설정하는 경우middle
나baseline
기 때문에 크롬의 의사 마진,진짜만을 얻을 수있는 옵션과 같은"조정 시스템"모든 브라우저 정렬 라벨 입력top
:(사진:vertical-align:상단,하단 및 하단 없이란 그림자)
그래서 어떤 결과로부터 얻을 수 있는 이?
input[type="checkbox"] {
height: 0.95em;
width: 0.95em;
}
label, input {
vertical-align: top;
}
<label><input type="checkbox">label</label>
위의 코드 조각 작품으로 Chrome(크롬의 브라우저)지만,다른 브라우저가 필요한 작은 크기의 확인란을 선택합니다.그것은 보인다는 것은 불가능을 조절하는 크기와 수직 정렬 방식으로 작동하는 주위에 크롬의 체크박스 이미지 특질. 나의 최종 제안:사용자는 확인란 대신하고 당신은 좌절하지 마십시오:)
나는 보통 체크 박스를 표지하지 않은 상태로두고 "레이블"을 별도의 요소로 만듭니다. 그것은 고통이지만, 체크 박스와 레이블이 표시되는 방식 사이에는 크로스 브라우저 차이가 너무 많아서 (알아 낸 것처럼) 이것이 모든 것이 어떻게 보이는지 제어 할 수있는 유일한 방법입니다.
또한 같은 이유로 Winforms 개발 에서이 작업을 수행하게됩니다. Checkbox 컨트롤의 근본적인 문제는 실제로 두 가지 다른 컨트롤 인 상자와 레이블이라는 것입니다. 확인란을 사용하면 컨트롤의 구현 자에게 남겨 두어 두 요소가 서로 옆에 표시되는 방법을 결정합니다 (그리고 항상 잘못된 경우, 원하는 경우가 잘못되었습니다).
나는 누군가가 당신의 질문에 더 나은 대답을하기를 바랍니다.
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>
위의 코드는 목록 항목을 Threecols에 배치하고 넓은 너비를 변경합니다.
다음은 브라우저에서 픽셀-완벽한 일관성, 심지어 IE9를 제공합니다.
접근 방식은 분명한 시점까지 매우 합리적입니다.
- 입력과 레이블을 만듭니다.
- 원하는대로 떠 다닐 수 있도록 블록으로 표시하십시오.
- 높이와 선 높이를 동일한 값으로 설정하여 수직으로 중심하고 정렬하십시오.
- 을 위한 여자 이름 측정, 요소의 높이를 계산하기 위해 브라우저는 해당 요소의 글꼴 높이를 알아야하며 EM 측정으로 설정되어서는 안됩니다.
이로 인해 전 세계적으로 적용 가능한 일반 규칙이 나타납니다.
input, label {display:block;float:left;height:1em;line-height:1em;}
양식, 필드 셋 또는 요소 당 글꼴 크기가 적응할 수 있습니다.
#myform input, #myform label {font-size:20px;}
Mac, Windows, iPhone 및 Android에서 최신 크롬, 사파리 및 Firefox에서 테스트되었습니다. 그리고 IE9.
이 메소드는 한 줄의 텍스트보다 높은 모든 입력 유형에 적용 할 수 있습니다. 적합한 유형 규칙을 적용하십시오.
그래서 나는 이것이 여러 번 응답되었음을 알고 있지만, 나는 이미 제공된 것보다 더 우아한 솔루션을 가지고 있다고 생각합니다. 그리고 1 개의 우아한 솔루션뿐만 아니라 공상을 간지럽히는 2 개의 별도 솔루션. 그렇게 말하면, 당신이 알아야하고 볼 필요가있는 모든 것은 2 JS 바이올린에 포함되어 있으며 의견이 있습니다.
솔루션 #1은 주어진 브라우저의 기본 "Checkbox"에 의존하지만 트위스트가 있습니다 ... DIV에는 크로스 브라우저를 배치하기 쉬운 DIV에 포함되어 있습니다. (이것은 당신이 FF의 못생긴 경계를 볼 수 없도록합니다)
간단한 HTML : (주석으로 CSS를 검토하려면 링크를 따르십시오. 코드 블록은 stackoverflow를 만족시키는 것입니다) http://jsfiddle.net/kqghj/
<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>
솔루션 #2는 "Checkbox Toggle Hack"을 사용하여 브라우저에 올바르게 배치 된 CSS 상태를 전환하고 확인되지 않은 상태 및 확인되지 않은 상태에 대한 간단한 스프라이트로 설정합니다. CheckBox 토글 해킹으로 배경 위치를 조정하는 것입니다. 내 생각에, 이것은 체크 박스 및 라디오를 더 많이 제어 할 수 있기 때문에 더 우아한 솔루션이며 브라우저에서 동일하게 보일 수 있습니다.
간단한 HTML : (주석으로 CSS를 검토하려면 링크를 따르십시오. 코드 블록은 stackoverflow를 만족시키는 것입니다) http://jsfiddle.net/sx5m2/
<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>
이 방법에 동의하지 않는다면, 저에게 의견을 남겨주세요. 왜 다른 사람들이 이러한 솔루션을 발견하지 못한 이유에 대한 피드백을 듣고 싶습니다. 이 방법 중 하나가 실패한 것을 본다면, 그것을 보는 것이 좋을 것입니다. 그러나 이것들은 최신 브라우저에서 테스트되었으며, 내가 본 것만 큼 오래된 HTML / CSS 방법에 의존했습니다.
예, 감사합니다! 이것도 나를 영원히 미쳤다.
내 특별한 경우, 이것은 나에게 효과적이었습니다.
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: top;
position: relative;
*top: 1px;
*overflow: hidden;
}
label {
display: block;
padding: 0;
padding-left: 15px;
text-indent: -15px;
border: 0px solid;
margin-left: 5px;
vertical-align: top;
}
나는 일부 차이점을 설명 할 수있는 reset.css를 사용하고 있지만 이것은 나에게 잘 작동하는 것 같습니다.
position: relative;
IE에는 z-index와 JQuery의 SlideUp/Slididown과 같은 애니메이션이있는 몇 가지 문제가 있습니다.
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>
추신:
나는 사용한다 ie7js CSS가 IE6에서 작동하도록합니다.