首页 > web前端 > css教程 > 正文

尽管有 W3 规范,如何在 Safari 和 IE 中使用填充来设置选择列表的样式?

Barbara Streisand
发布: 2024-10-24 08:51:02
原创
509 人浏览过

How to Style Select Lists with Padding in Safari and IE Despite W3 Specification?

在 Safari 和 IE 中使用填充来设计选择列表

尽管 W3 规范不禁止在选择框中使用填充,但 Webkit 浏览器如因为 Safari 和 Chrome 不支持此功能。为了达到预期的效果,请考虑用 text-indent 替换 padding-left 属性,并确保相应地调整选择框宽度。

示例:

在下面代码片段中,padding-left 属性被删除并替换为 text-indent:

<code class="html"><select id="sexID" name="user[sex]" 
        style="border:1px solid #C1272D;
               width:258px; // 243 + 15px
               text-indent:15px;
               height:25px;
               color:#808080;"></code>
登录后复制

通过添加与填充占用的相同数量的文本缩进,选择框现在具有左对齐文本字段。此解决方法有效地模拟了 Safari 和 IE 中的填充行为,从而在不同浏览器之间提供一致的样式体验。

以上是尽管有 W3 规范,如何在 Safari 和 IE 中使用填充来设置选择列表的样式?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板