Html 添加要选择的填充，但不添加选项标记

我有一个简单的选择下拉菜单，左键和右键都有大量的填充：

如果单击select输入，您会注意到选项标记也应用了相同数量的左填充和右填充。但是，我希望填充仅应用于选择标记，而不应用于选项标记，即选项标记没有填充

我该怎么做

挑选{ 宽度：400px； 背景：浅灰色； 填充：12px 48px； } 选择1 选择2 选择3 选择4 备选案文5

---

据我所知，选择框和下拉列表由浏览器引擎渲染。这意味着它们是不可变的

因此，唯一的解决方案是使用一个框架，因为这个原因，有许多外部的或由您自己构建的框架

如果在开发人员控制台中查看，您还将看到option元素的大多数样式由浏览器继承并变灰

试试这个：

$document.readyfunction{ $'.sel'。单击函数{ $'ul'。切换； } $'li'。单击函数{ $'.sel输入[type=text]'.val$this.html； $‘ul’。隐藏； } } * { 框大小：边框框； } .包装纸{ 宽度：400px； 位置：相对位置； 光标：指针； } 塞尔先生{ 位置：相对位置； 宽度：继承； 边框：1px000； } .sel输入[类型=文本]{ 宽度：100%； 背景：浅灰色； 填充：12px 48px； 边框样式：无； 大纲：无； 光标：指针； } 塞尔斯潘先生{ 位置：绝对位置； 右：25px； 顶部：10px； } 保险商实验室{ 填充：0； 保证金：0； 列表样式：无； 背景：浅灰色； 宽度：100%； 显示：无； z指数：999； } 李{ 填充：10px0； } 李：悬停{ 背景色：天蓝色； } ▼ 选择1 选择2 选择3

---

这会出现在Chrome中，而不是Firefox中。这可能会很有帮助：如果您想要不同的选项样式，可以使用select>option。至于许多与浏览器相关的问题：您想要这种行为，但您的用户想要吗？Webkit似乎不允许设置样式选项，因此它会将选项的文本与选择的文本对齐。覆盖此行为可能会破坏某些显示，如mobile，它有其他方法来实现select的下拉菜单、屏幕阅读器等。