Question

据我所知，在所有现代浏览器的选择框（下拉菜单）中都没有获得一致填充的解决方案。

<select class="dropdown">
    <option>Planes</option>
    <option>Trains</option>
    <option>Automobiles</option>
</select>

我听过的解决方案是使用text-indent，但这完全在Firefox中打破，更不用说在其他浏览器中偶尔支持了。如果您使用组合，您实际上会在所有主要浏览器中获得完全不同的结果。

.dropdown {
    padding-left: 10px;
    text-indent: 10px;
}

IE：仅填充呈现

Chrome：两者呈现

Safari：仅文字缩进呈现

Firefox：padding ，带有奇怪的文字缩进错误

还有其他方法可以解决此问题吗？似乎最好的方法是抛弃文本缩进并尝试在没有它的情况下找出在Safari中缩进的方法，因为其他一切都可以处理填充就好了。

相关小提琴：http://jsfiddle.net/s3Lrh/1/

Answer 1

相信我，没有好办法做到这一点。样式选择框一直是错误的，支持有限。

由于您可以使用jQuery，我建议使用Select2或Chosen这样的内容，它们可以通过包含“假”选择框来设置您的选择框的样式，同时隐藏真实的选择框。

Answer 2

这是我发现最有效的方法：

#1234 23:28:13 sdasver id 235768 end_log_pos 4347687 CRC32 0xfe136bd2 Query thread_id=1425356 exec_time=0 error_code=0 

UPDATE sys_stat SET `sys_updated_by` = 'system', `sys_mod_count` = 19014, `sys_updated_on` = '2019-04-30 06:28:13', `type` = 'warning', `value` = ' running: xyzz' WHERE sys_status.`sys_id` = '2c5d43134f0262cf5210c712' /* nsdkjsnda1, gs:glide.scheduler.worker.0, tx:649346ba4f052cf5210c774 */

#1234 23:28:13 sasdar id 608695768 end_log_pos 4350401 CRC32 0xcf3a7672 Query thread_id=1425363 exec_time=0 error_code=0 

UPDATE sys_trig SET `sys_updated_by` = 'system', `sys_mod_count` = 4263170, `state` = 1, `sys_updated_on` = '2019-04-30 06:28:13' WHERE sys_trigger.`sys_id` = '64a31111f93319d4d19eedeb6' /* nasdada02_1, gs:glide.scheduler.workr.0, tx:649346ba0f5210c774 */

#1234 23:28:13 sdaser id 608695768 end_log_pos 4357673 CRC32 0x80dd6e55 Query thread_id=1425359 exec_time=0 error_code=0 

UPDATE syseve SET `state` = 'resumed.2c9346ba4f9d62cf5210c774', `claimed_by` = 'apd032.sasds0.dsadasce-sdas.com:nas1' WHERE (sysevent0004.`process_on` <= '2019-04-30 06:28:13' AND sysevent0004.`state` = 'encore-ready' AND sysevent0004.`queue` = 'flow_engine') /* nsfsdfs1, gs:glide.scheduler.workr.0, tx:649346ba4f05f745210c774 */

#1234 23:28:13 sdaser id 608695768 end_log_pos 4358824 CRC32 0xf281abf6 Query thread_id=1425365 exec_time=0 error_code=0 

UPDATE syseve SET `state` = 'queued.2c9346ba4f05f740899d62cf5210c774', `claimed_by` = 'apsds0asd32.sedasd0.dce-nasdaow.csdsdm:ndasdav02_1' WHERE (sysevent0004.`process_on` <= '2019-04-30 06:28:13' AND sysevent0004.`state` = 'ready' AND sysevent0004.`queue` = 'flow_engine') /* nsdfs2_1, gs:glide.scheduler.workr.0, tx:649346ba4f05f5210c774 */

UPDATE sys_trigger SET `log` = 0, `trigger_type` = 1, `sys_mod_count` = 4263171, `sys_updated_on` = '2019-04-30 06:28:13', `error_count` = 0, `priority` = 100, `trigger_class` = 'com.snc.process_flow.engine.PFJob', `job_context` = '#Mon Apr 29 23:28:13 PDT 2019 ', `run_count` = 1421121, `sys_id` = '64a31111f93313edeb6', `sys_updated_by` = 'system', `sys_created_on` = '2018-08-07 11:38:16', `job_id` = '88d87a408f3222037bdeeb5', `repeat` = '1970-01-01 00:00:16', `processing_duration` = 58, `name` = 'Flow Engine Event Handler', `next_action` = '2019-04-30 06:28:24', `state` = 0, `maintenance` = 0, `sys_created_by` = 'guest', `upgrade_safe` = 1, `claimed_by`= NULL WHERE sys_trigger.`sys_id` = '64a349d4d19eedeb6' /* nsadsfd02_1, gs:glide.scheduler.workr.0, tx:6493asdd62cf5210c774 */

在撰写本文时，此功能可在Chrome，Safari和Firefox上使用。

希望这对某人有帮助！

Answer 3

我不使用选择插件就能完成这项工作的唯一方法是在这样的文本之前添加空格：

<option>&nbsp;&nbsp;&nbsp;Some Text Here</option>

这将与padding-left相似

Answer 4

你必须以不同的方式解决这个问题。这是你应该做的：

option
{
position: relative;
padding-left: 5px; /*or whatever*/
}

这是一种通用方法，它可以完成工作。

在CSS3中的Select Tag（下拉列表）中填充左侧

4 个答案: