gpt4 book ai didi

javascript - Firefox 单选按钮焦点样式

转载 作者:太空宇宙 更新时间:2023-11-04 13:11:13 24 4
gpt4 key购买 nike

我正在尝试在焦点打开时禁用 firefox 单选按钮的倒置样式(?)

ugly on focus

看起来像下面未聚焦的版本,即使在聚焦时也是如此。因此过渡将是在中心添加检查点,周围的半圆不会改变。

nice not on focus

我试过用

[type="radio"]:checked {
-moz-appearance: none; }

 [type="radio"]:focus {
-moz-appearance: none; }

[type="radio"]:active {
-moz-appearance: none; }

但没有任何作用。我已经搜索过,但一无所获。我希望用 CSS 做到这一点。

这是一个 fiddle :http://jsfiddle.net/m5FS6/

最佳答案

这是请求的 Javascript 解决方案:live demo .

这是代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
input[type="radio"],
input[type="checkbox"] {
width: 20px;
height: 20px;
-moz-appearance: none;
}
</style>
</head>
<body>
<form>
<input type="radio"> First radio
<br>
<input type="radio"> Second radio
<br>
<input type="checkbox"> First checkbox
<br>
<input type="checkbox"> Second checkbox
</form>
<script>
var radios = document.querySelectorAll('input[type="radio"]');
for (var i=0; i<radios.length; i++) {
radios[i].onfocus = function() {
this.blur();
}
}

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i=0; i<checkboxes.length; i++) {
checkboxes[i].onfocus = function() {
this.blur();
}
}
</script>
</body>
</html>

.
请务必小心属性 appearance。在 Chrome25+(可能更早)中,不显示有问题的输入。在我看来,Firefox 表现出不合逻辑的行为。这通常不是一个好兆头。

最后,您现在应该将标签 javascript 添加到您的问题中,再加上标签 form。您应该更正它:没有 elemtent[type="radio"],甚至没有 element[type="radio"]。在 fiddle 中你有正确的代码,但你的问题看起来不像现在这样聪明。

关于javascript - Firefox 单选按钮焦点样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24682455/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com