Chọn vùng đệm tùy chọn không hoạt động trong chrome

Chọn vùng đệm tùy chọn không hoạt động trong chrome

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

Tôi vừa tìm thấy một cách để áp dụng đệm cho đầu vào được chọn trong chrome

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

Có vẻ như hoạt động trong chrome hiện tại 39.0.2171.71 (64-bit) và safari (tôi chỉ thử nghiệm điều này trên máy mac).

Điều này dường như loại bỏ kiểu mặc định được thêm vào đầu vào đã chọn (nó cũng loại bỏ mũi tên thả xuống), nhưng cho phép bạn sau đó sử dụng kiểu của riêng mình mà không cần chrome ghi đè nó.

Tôi tình cờ gặp bản sửa lỗi này khi sử dụng mã từ đây: http://fettblog.eu/style-select-elements/

Hack đơn giản này sẽ thụt lề văn bản. Hoạt động tốt.

select {
  text-indent: 5px;
}

Có vẻ như

Rất tiếc, trình duyệt webkit chưa hỗ trợ tạo kiểu các thẻ tùy chọn.

bạn có thể tìm thấy câu hỏi tương tự ở đây

1. Làm cách nào để tạo kiểu cho phần tử tùy chọn của thẻ chọn?
2. Giá trị tùy chọn tạo kiểu trong html thả xuống được chọn không hoạt động trên Chrome & Safari

Giải pháp trình duyệt chéo được sử dụng rộng rãi nhất là sử dụng ul li

Hy vọng nó giúp!

Tôi đã sửa nó với cái này

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

Ý tưởng rất, RẤT đơn giản, nhưng bạn có thể sửa đổi nó cho phù hợp. Điều này không được thiết lập để trông đẹp, chỉ để cung cấp ý tưởng. Hy vọng nó giúp.

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>

Kịch bản:

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

BẢN GIỚI THIỆU

Điều đó không hoạt động khi optionnhập bởi vì đó là trình đơn thả xuống do "hệ thống" tạo nhưng bạn có thể đặt tùy paddingchọn.

Chỉ cần đặt lại thuộc box-sizingtính content-boxtrong CSS của bạn.

Giá trị mặc định của selectlà border-box.

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

Tôi có một mẹo nhỏ cho vấn đề của bạn. Nhưng bạn phải sử dụng javascript. Nếu bạn phát hiện rằng trình duyệt là Chrome, hãy chèn các tùy chọn " giả " vào giữa mọi tùy chọn. Cung cấp một lớp mới cho các tùy chọn " giả " đó và làm cho chúng bị vô hiệu hóa. Chiều cao của các tùy chọn " dummy " mà bạn có thể xác định bằng thuộc tính font-size .

CSS:

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

Kịch bản:

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

Không phải đệm nhưng nếu mục tiêu của bạn chỉ đơn giản là làm cho nó lớn hơn, bạn có thể tăng font-size. Và sử dụng nó với việc font-size-adjustgiảm kích thước phông chữ trở lại bình thường trên các tùy chọn được chọn và không phải trên các tùy chọn, vì vậy nó sẽ làm cho kích thước phông chữ optionlớn hơn.

Không chắc liệu nó có hoạt động trên tất cả các trình duyệt hay sẽ tiếp tục hoạt động hiện tại.

Đã thử nghiệm trên Chrome 85 và 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>

Không có Jquery - Không có tệp js của bên thứ ba

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>

mã thông minh - sử dụng jquery

Bạn có thể sử dụng font-sizetài sản cho tùy chọn nếu bạn cần.

Chỉ cần đặt chiều cao của thẻ chọn

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

Bạn nên nhắm mục tiêu chọn cho CSS của mình thay vì chọn tùy chọn.

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

Xem bài viết này Hộp chọn tạo kiểu với CSS3 để có thêm tùy chọn tạo kiểu.