크롬에서 작동하지 않는 옵션 패딩 선택

크롬에서 작동하지 않는 옵션 패딩 선택

<style>
select option { padding:5px 0px; }
</style>    
<select>
<option>1</option>
<option>2</option>
<option>3</option> 
</select>

크롬의 선택 입력에 패딩을 적용하는 방법을 찾았습니다.

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px;
}

현재 크롬 39.0.2171.71 (64 비트)과 사파리 (Mac에서만 테스트)에서 작동하는 것 같습니다.

이것은 선택 입력에 추가 된 기본 스타일링을 제거하는 것처럼 보이지만 (드롭 다운 화살표도 제거됨) 크롬을 재정의하지 않고 자신 만의 스타일을 사용할 수 있습니다.

http://fettblog.eu/style-select-elements/ 에서 코드를 사용하는 동안이 수정 사항을 우연히 발견했습니다.

이 간단한 해킹은 텍스트를 들여 씁니다. 잘 작동합니다.

select {
  text-indent: 5px;
}

그것은 보인다

안타깝게도 웹킷 브라우저는 아직 옵션 태그 스타일을 지원하지 않습니다.

여기에서 비슷한 질문을 찾을 수 있습니다.

1. 선택 태그의 옵션 요소에 스타일을 지정하는 방법은 무엇입니까?
2. 선택 드롭 다운 html의 스타일 옵션 값이 Chrome 및 Safari에서 작동하지 않음

가장 널리 사용되는 크로스 브라우저 솔루션은 ul li를 사용하는 것입니다.

도움이 되었기를 바랍니다.

나는 이것으로 그것을 고쳤다

select {
    max-height: calc(1.2em + 24px);
    height: calc(1.2em + 24px);
}


max-height: calc(your line height + (top + bottom padding));
height: calc(your line height + (top + bottom padding));

아주 간단한 아이디어이지만 그에 따라 수정할 수 있습니다. 이것은보기 좋게 설정되지 않고 단지 아이디어를 제공하기위한 것입니다. 도움이 되었기를 바랍니다.

CSS :

ul {
    width: 50px;
    height: 20px;
    border: 1px solid black;
    display: block;

}

li {
    padding: 5px 0px;
    width: 50px;
    display: none;

}

HTML :

<ul id="customComboBox">
&nbsp
    <li>Test</li>
    <li>Test 2</li>
    <li>Test 3</li>
</ul>

스크립트:

$(document).ready(function(){
    $("#customComboBox").click(function(){
        $("li").toggle("slow");
    });
});

데모

option"시스템"생성 드롭 다운 메뉴이기 때문에 입력시 작동하지 않지만 선택 항목을 설정할 수 있습니다 padding.

CSS에서 box-sizing속성을 content-box로 재설정하면 됩니다 .

의 기본값은 select입니다 border-box.

select {
 box-sizing: content-box;
 padding: 5px 0;
}

나는 당신의 문제에 대한 약간의 트릭이 있습니다. 그러나이를 위해서는 자바 스크립트를 사용해야합니다. 브라우저가 Chrome 인 것을 감지하면 모든 옵션 사이에 " 더미 "옵션을 삽입하십시오 . " 더미 "옵션에 대한 새 클래스를 제공 하고 비활성화하십시오. font-size 속성으로 정의 할 수있는 " 더미 "옵션 의 높이입니다 .

CSS :

option.dummy-option-for-chrome {
  font-size:2px;
  color:transparent;
}

스크립트:

function prepareHtml5Selects() {

  var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
  if(!is_chrome) return;

  $('select > option').each(function() {
    $('<option class="dummy-option-for-chrome" disabled></option>')
     .insertBefore($(this));
  });
  $('<option class="dummy-option-for-chrome" disabled></option>')
    .insertAfter($('select > option:last-child'));
}

패딩이 아니라 단순히 더 크게 만드는 것이 목표 인 경우 font-size. 그리고 함께 사용하면 font-size-adjust옵션이 아닌 선택시 글꼴 크기가 다시 정상으로 줄어들므로 결국 option더 커집니다.

모든 브라우저에서 작동하는지 또는 최신 상태로 계속 작동하는지 확실하지 않습니다.

Chrome 85 및 Firefox 81에서 테스트되었습니다.

select {
    font-size: 2em;
    font-size-adjust: 0.3;
}

<label>
  Select: <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
</label>

Jquery 없음-타사 js 파일 없음

function clickComboBox(){
  comboOpt = document.getElementsByClassName("opt");
  for (i = 0; i < comboOpt.length; i++) {
      if (comboOpt[i].style.display === "block") {
        comboOpt[i].style.display = "none";
      } else {
        comboOpt[i].style.display = "block";
      }
  }    
}
function clickOpt(value1,text1){
  document.getElementById("selectedValue").value=value1;
  document.getElementById("customComboBox").innerHTML=text1;
  clickComboBox();
}

#customComboBox{
width: 150px;
height: 20px;
border: 1px solid #CCCCCC;
display: block;
padding: 2px 5px;
}
.opt{
padding: 5px 0px;background-color:#CCCCCC;
width: 160px;
display: none;
}

<div id="customComboBox"  onClick="clickComboBox()">
-Select Value-
</div>
<input type="hidden" id="selectedValue">
  <div class="opt">
  <div onClick="clickOpt('01','Test1')"><img  src="https://pasteboard.co/J6940Vs.png" height="20">Test1</div>
  <div style="padding-left:10px;" onClick="clickOpt('02','Test2')">Test2</div>
  <div onClick="clickOpt('03','Test3')">Test3</div>
  </div>

스마트 코드-jquery 사용

모든 옵션의 임의 들여 쓰기

임의의 임의의 <option />요소 만 들여 쓰려면  여기에 게시 된 솔루션의 브라우저 간 호환성이 가장 뛰어난를 사용할 수 있습니다.

.optionGroup {
  font-weight: bold;
  font-style: italic;
}

<select>
    <option class="optionGroup" selected disabled>Choose one</option>
    <option value="sydney" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Sydney</option>
    <option value="melbourne" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Melbourne</option>
    <option value="cromwell" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Cromwell</option>
    <option value="queenstown" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Queenstown</option>
</select>

옵션의 정렬 된 들여 쓰기

그러나 데이터에 정렬되고 정렬 된 구조 가있는 경우 <optgroup/>구문 을 사용하는 것이 좋습니다 ....

HTML 요소는 요소 내에서 옵션 그룹을 만듭니다. (출처 : MDN 웹 문서 :<optgroup> )

<select>
    <optgroup label="Australia" default selected>
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
    </optgroup>
    <optgroup label="United Kingdom">
        <option value="london">London</option>
        <option value="glasgow">Glasgow</option>
    </optgroup>
</select>

안타깝게도 <optgroup />현재 브라우저 에서는 한 수준 만 허용되며 현재 지원됩니다. (출처 : w3.org .) 개인적으로, 사양의 해당 부분이 깨 졌다고 생각하지만  위 의 트릭 을 사용하여 항상 세 번째, 네 번째 등의 들여 쓰기 수준으로 확장 할 수 있습니다 .

font-size필요한 경우 옵션에 대한 속성을 사용할 수 있습니다 .

선택 태그의 높이를 설정하기 만하면됩니다.

select{
    height: 30px;
    max-height: 30px;
}

선택 옵션 대신 CSS 선택을 타겟팅해야합니다.

select { 
padding: 10px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

더 많은 스타일링 옵션을 보려면 CSS3 로 스타일링 선택 상자를 참조 하십시오 .