除复选框外，将边框应用于所有输入元素的CSS

Question

28

我有一个css类：

input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    border: 1px solid #003399;
}

这适用于我所需的大部分内容，但现在我需要一个复选框，它没有这个边框，同时页面上的其他输入元素继续应用该边框。

因此，我创建了额外的 CSS 类：

input[type="checkbox"] 
{
    border: none;
}

这在FireFox和Chrome中运行良好，但ie 8不行。使用ie中的开发人员工具检查元素时，可以看到两种样式都被选中，但只有当我取消选择输入样式旁边的复选框时，复选框的边框才会消失。

这是默认情况：

图片描述

这是我用来去掉边框的方法：

图片描述

- user156862

你有考虑使用JavaScript来管理吗？在IE浏览器中，属性选择器有些问题（直到版本7才开始支持）。 - Samuele Mattiuzzo

如果您对所有输入都不指定边框，然后将它们添加到您想要的输入中，会发生什么？ - punkrockbuddyholly

1

似乎是属性选择器处理中的一个错误。使用类而不是属性选择器可以使其正常工作。注意：当您确保有适当的文档类型（例如简单的<!doctype html>）时，它确实可以工作。 - Steven Don

4个回答

0

这有帮助吗？

input[type="checkbox"] 
{
    border: none !important;
}

- Slavenko Miljic

2

尽可能避免使用!important。 - Mo.

0

它似乎是说medium none。您可以尝试使用border: 0px transparent;，看看是否有所不同。

- punkrockbuddyholly

没有任何区别，MrMisterMan。我还尝试了input[type="checkbox"] { border-width: 0px; border-style:none; } - user156862

0

在IE中，你看到的不是边框，而是由于复选框获得焦点而导致的高亮。尝试在复选框单击时执行模糊事件，可能会有所帮助。

- ShankarSangoli

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steven Don · Accepted Answer

为什么不直接使用:not选择器来反转属性选择器？

input:not([type=checkbox])
{
    border: 1px solid #039;
}

如果是IE8或更早版本，您应该为那些需要设置边框的类别单独使用规则，因为它不支持:not（或任何好的东西）。

编辑：

input[type=checkbox]
{
    border: none;
}

如果添加文档类型，甚至是简单的<!doctype html>，在IE8中也可以正常工作。