- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有下面的样式来实现伪复选框。在现实生活中,它有一个背景图像来显示我想要的标记,但为了研究目的,我简化了这个例子。它在 Chrome 和 Safari 中运行良好,但在 Firefox 或 IE 中运行不佳。另一双眼睛将不胜感激。
http://www.bootply.com/6xig9trE5C
代码:
/*CSS*/
ul {
margin: 0 auto;
width: 270px;
}
li {
float: left;
height: 30px;
list-style-type: none;
text-align: left;
white-space: nowrap;
width: 50%;
}
input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
left: -2000px;
margin: -1px;
padding: 0;
position: relative;
width: 1px;
}
input[type=checkbox]:after {
content: 'X';
display: inline-block;
height: 19px;
left: 1969px;
position: relative;
top: -12px;
width: 19px;
}
input[type=checkbox]:checked:after {
content: 'V';
}
label {
cursor: pointer;
display: inline-block;
font-size: 15px;
height: 27px;
line-height: 22px;
padding-left: 32px;
-khtml-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
<!-- HTML -->
<div class="option">
<ul>
<li>
<label><input name="cb1" type="checkbox" checked="checked" value="1">Checkbox1</label>
</li>
<li>
<label><input name="cb2" type="checkbox" checked="checked" value="2">Checkbox2</label>
</li>
<li>
<label><input name="cb3" type="checkbox" checked="checked" value="3">Checkbox3</label>
</li>
</ul>
</div>
最佳答案
:before
和 :after
伪元素在目标元素内容之前或之后添加新内容。由于 Input 元素没有内容;他们只是有一个值(value)。所以从技术上讲,我们不能对 input
元素使用 pseudo element
。
所以我猜在这种情况下 chrome
浏览器是错误的。而IE
和Firefox
浏览器就对了。
你可以看看是什么w3c说。
关于CSS :after pseudo checkbox not working in IE or Firebug,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30263629/
我已经为我的项目配置了 tailwindcss,但是在 npm run start 之后我得到了以下错误。 (node:7032) UnhandledPromiseRejectionWarning:错
我使用 create-react-app 创建了一个应用程序并且在尝试构建生产优化版本时遇到错误 yarn build : > yarn build help yarn run v1.9.4 $ re
我正在寻找一种将 :content 伪元素添加到空元素的方法,并遇到了 :empty CSS 伪选择器,它看起来像会达到我正在寻找的目的。基本上,我想添加一个通用消息,如“Nothing found”
Font Awesome 未提供 :after伪。是否可以使用 :after默认情况下而不是 :before伪? 例如,如果我使用:facebook那么图标应该使用:after而不是 :before
我想在禁用时更改切换按钮的颜色。我使用 :before fetaure of css 实现了这个切换。代码位于 https://jsfiddle.net/sachin8085/adm5t7rz/6/
我最近在 Firefox 中发现了一个警告 Warning: Unknown pseudo-class or pseudo-element 'hidden' 这是页面 http://eleven23.
我有一个多项式 data Poly a = Poly [a] 我希望能够做类似 fmap (take 3) polynomial 的事情但我不能,因为 Poly不是真正的仿函数,因为 f我在 fmap
我想将某种样式应用到一个元素的所有后代,除了一些。 这是我正在尝试实现的示例:http://jsfiddle.net/f8FLe/ .root * :not(.nested) { color:
我正在学习 Haskell 中的代数 DT。我想做的是创建一个新的 ADT 来“扩展”现有的 ADT。我找不到如何表达我想要的东西,有人可以建议替代模式或建议解决方案。我希望它们是不同的类型,但复制和
我现在正在通过将所有内容包含在一个函数中,将全局变量变成“伪全局变量”,从而从我的代码中删除大部分全局变量,这些全局变量都可以从该函数 block 内的任何地方访问。 (function(){ var
我正在尝试创建动画时间轴。当时间轴出现时,我正在使用滚动显示来触发动画。每个时间线条目都有一个左边框和一个伪元素 :before 与之关联。 :before 元素是一个标记每个时间线条目开始的点。当动
我的大脑并没有完全围绕这个:我正在使用我的 h1 上的 :before 和 :after 伪元素>。我的 h1 有一个 100% 宽度。 我希望 :after 是一个重复的背景图形,填充空白,后置文本
是否可以在 :before 伪类的内容中添加类或 ID?我知道这行不通,但是类似: #menu { height: 100px; width: 100px; } #menu:befor
假设我有一个带有下划线的跨度: Hello, I'm underlined text .underline { color: #444; font-size: 250%; display:
这个问题在这里已经有了答案: CSS selector with period in ID (3 个答案) 关闭 6 年前。
我正在尝试将 :after 伪元素移动到 div 的末尾,有点像页脚。 Some content here .box { height: 60vh; } .box:after {
在您指定内容之后,:AFTER 和:BEFORE 伪元素的默认display: 属性是什么。 是display: inline还是display: inline-block? 无法在 default
我遇到这样一种情况,我有两个元素在 DOM(邻居)中处于同一级别。当我悬停在 DOM 中之前的元素时,我希望显示它下面的元素。我还想访问我正在显示的元素的子元素并显示其 :before 伪元素。 SC
我有一个样式规则: .tabs li { border: 1px solid transparent; } .tabs li:not(:last-child):not(:nth-child(2
我有两个相同的 CSS 规则,但一个没有覆盖另一个。 我使用了 right 而不是 left 规则,但它不会覆盖 left 规则。另一方面 top 规则正在覆盖。我也使用了 !important 规则
我是一名优秀的程序员,十分优秀!