html – 文本转换：大小写为元素工作,如果是这样的浏览器？

发布时间：2020-12-14 21:25:13 所属栏目：资源来源：网络整理

导读：我有一个 select元素，我想在其中大小写每个 option中显示的文本。标签。例如，我想这里的2个值是Bar和Baz(不是bar和baz) style option { text-transform: Capitalize; }/styleselect name="foo" option value="bar"bar/option option value="baz"baz/optio

我有一个< select>元素，我想在其中大小写每个< option>中显示的文本。标签。

例如，我想这里的2个值是Bar和Baz(不是bar和baz)

<style>
    option { text-transform: Capitalize; }
</style>

<select name="foo">
    <option value="bar">bar</option>
    <option value="baz">baz</option>
</select>

这在我的Chrome(14.0.835.202)中似乎不起作用，但在我的Firefox(8.0)和IE 8中工作。

编辑：已添加< style>标签为了清楚起见

解决方法

正如其他人所说，这个目前是 a bug in Chrome.下面的代码是正确的方式来做你所要求的：

select option {text-transform:capitalize}

这是a working fiddle to demonstrate(查看Chrome以外的其他内容)

附加信息：

我想你也会发现上述方法在Safari中也不起作用。如果您想要跨浏览器解决方案，JavaScript将是您唯一的选择。

如果您对此开放，以下是一个简单的jQuery示例：

$("option").each(function() {
  $(this).text($(this).text().charAt(0).toUpperCase() + $(this).text().slice(1));
});

和a working fiddle。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!