Html 选择选项padding not working in chrome_Html_Css

Html 选择选项padding not working in chrome

html css

Html 选择选项padding not working in chrome,html,css,Html,Css,选择选项padding not working in chrome <style> select option { padding:5px 0px; } </style> <select> <option>1</option> <option>2</option> <option>3</option> </select> 选择选项{填充：5px 0px；} 1.

选择选项padding not working in chrome

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


选择选项{填充：5px 0px；}
1.
2.
3.

似乎

不幸的是，webkit浏览器还不支持选项标记的样式

你可以在这里找到类似的问题

最广泛使用的跨浏览器解决方案是使用ul li

希望有帮助

您应该针对CSS选择选项，而不是选择选项

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

查看本文了解更多样式选项。

非常非常简单的想法，但您可以相应地修改它。这并不是为了看起来好，只是为了提供想法。希望能有帮助

CSS:

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

}

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

}

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

HTML:

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

}

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

}

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

我刚刚找到了一种方法，可以将填充应用到chrome中的select输入

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

似乎在当前的Chrome39.0.2171.71（64位）和safari（我只在mac上测试过）中工作

这似乎删除了添加到选择输入中的默认样式（也删除了下拉箭头），但允许您使用自己的样式，而无需chrome覆盖它

在这里使用代码时，我无意中发现了此修复方法：

如果需要，您可以使用

字体大小

属性作为选项。

这不适用于

选项

条目，因为它是“系统”生成的下拉菜单，但您可以设置选择的

填充

只需将CSS中的

框大小

属性重置为

内容框

选择

的默认值是

边框框

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

这个简单的修改将使文本缩进。效果很好

select {
  text-indent: 5px;
}

我有一个解决你问题的小诀窍。但为此，您必须使用javascript。如果检测到浏览器为Chrome浏览器，请在每个选项之间插入“虚拟”选项。为这些“虚拟”选项指定一个新类，并将其禁用。可以使用“字体大小”属性定义的“虚拟”选项的高度

CSS:

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

}

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

}

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

脚本：

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

}

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

}

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

函数prepareHtml5Selects（）{
var是_chrome=/chrome/.test（navigator.userAgent.toLowerCase（））；
如果（！is_chrome）返回；
$（'select>option'）。每个（函数（）{
$('')
.insertBefore（$（本））；
});
$('')
.insertAfter（$（'select>option:last child'）；
}

我用这个修复了它

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

没有Jquery-没有第三方js文件

函数单击组合框（）{
comboOpt=document.getElementsByClassName（“opt”）；
对于（i=0；i


#自定义组合框{
宽度：150px；
高度：20px；
边框：1px实心#中交；
显示：块；
填充物：2px 5px；
}
.选择{
填充：5px0px；背景色：#cccc；
宽度：160px；
显示：无；
}

-选择值-
测试1
测试2
测试3
不填充，但如果您的目标只是将其变大，则可以增加字体大小。将其与font size adjust
一起使用，可以在选择和不选择选项时将字体大小减小到正常值，因此最终会使选项变大
不确定它是否能在所有浏览器上工作，或者是否能在当前浏览器中继续工作
在Chrome85和Firefox81上测试


选择{
字号：2em；
字体大小调整：0.3；
}

选择：
选择1
选择2
选择3
任意缩进任何选项
如果您只想缩进随机的任意元素，您可以使用，它在这里发布的解决方案中具有最大的跨浏览器兼容性

.optionGroup{
字体大小：粗体；
字体：斜体；
}

选一个
悉尼
墨尔本
克伦威尔
昆斯敦
嘿，伙计，给选项文本填充的简单方法是让我们像下面的检查一样使用
<option value="<?= $subc->gc_id ?>">&nbsp;&nbsp;&nbsp;<?php echo $subc->gc_title; ?> 
</option>

你想要实现什么？每个选项都要填充5px？或者仅仅是主框？是的…我需要选项值的填充，即使它不是严格的填充，对于左填充，您可以在修复时使用：我理解@PiyushMarvaniya的可能重复，但是我记得不可能使用select选项修改单个元素。这就是为什么我提供了另一种选择。这个示例不提供键盘导航（箭头或mac快捷键）、web辅助功能工具。同样，问题不是创建自定义下拉列表，而是添加填充。我已经根据OP的需求为OP提供了一个单一的基础，但是我不会为他们创建自定义控件。=）如果您打算使用UL/LI下拉列表，我建议您只使用Bootstrap的下拉小部件。版本2和版本3支持role=“menu”和role=“navigation”来启用箭头键。使用经过国际海事组织充分审查的东西是有意义的。@mbokil+1，绝对是一个不错的选择，而不是重新发明轮子，使用那里的东西。谢谢你的回答。让我惊讶的是，自从网站、HTML和CSS出现这么多年后，仍然缺乏对诸如选择选项填充之类的东西进行样式化的能力。样式和定位元素可能非常令人沮丧，但在Android开发中，这要容易得多。我不明白为什么带有HTML和CSS的web环境看起来如此“未完成”，与桌面和本机移动环境相比，这是一项“正在进行的工作”。也许在不久的将来，web会更漂亮，开发人员将得到影子dom的帮助-：）希望开发人员能够控制表单元素的内层。但是RIP IE。@Bryan Web是一项古老的技术，因此它有一些古老的想法，但没有得到改进。因为浏览器支持