如何使收音机看起来像禁用的，但不要指定disabled=“禁用”，只使用css和js
如何使收音机看起来像禁用的，但不要指定disabled=“禁用”，只使用css和js
提问于 2014-12-05 08:56:51
正如我们所知道的，如果我们将disabled=“禁用”设置为收音机，则当提交到后端时，它的值将在表单中丢失。而收音机没有只读属性。现在，我不想为禁用的收音机添加一个隐藏的，我只想使用js和css来使它看起来像禁用的。
<html>
<head>
<title>TEST</title>
<script>
</script>
<style>
#radio1 {
/* how to make radio1 looks same as radio2*/
pointer-events: none;
opacity:0.5;
}
</style>
</head>
<body>
<input type="radio" id="radio1" onclick="return false"/>
<input type="radio" id="radio2" disabled="disabled"/>
</body>
</html>
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-12-05 09:12:20
我相信您可以用readonly模拟pointer-events: none属性，对吗？
<input type="radio" id="radio1" onclick="return false" style="pointer-events: none;"/>或者你可以在后台处理这种情况。如果无线电被禁用--就像我想要使用某种默认值一样，只需在后端分配它。
Stack Overflow用户
发布于 2014-12-05 09:28:36
您可以使用opacity
#radio1 {
opacity:.5;
}<input type="radio" id="radio1" onclick="return false" />
<input type="radio" id="radio2" disabled="disabled" />
或者通过添加任何元素来创建自己的样式。
label {
display: inline-block;
width: 25px;
height: 25px;
position: relative;
}
input[type="radio"] {
position: absolute;
visibility: hidden;
}
input[type="radio"] + label {
border: 1px solid rgb(208, 208, 208);
border-radius: 50%;
}
label:before {
content: '';
border-radius: 50%;
position: absolute;
background: rgb(208, 208, 208);
left: 0;
top: 0;
display: inline-block;
width: 19px;
height: 19px;
margin: 3px 0 0 3px;
}<input type="radio" id="radio1" onclick="return false" />
<label for="radio1"></label>
<input type="radio" id="radio2" disabled="disabled" />
<label for="radio2"></label>
Stack Overflow用户
发布于 2014-12-05 09:10:26
通常情况下，它只是按照共同的CSS-规则工作。所以：
input[type="radio"] {
background-color: light-grey;
border: 0 none;
}不幸的是，火狐不支持通过CSS改变任何颜色，所以你的唯一选择，我知道到目前为止，是使用背景图像(使用一个禁用的单选按钮的图像)。参考文献
问候Mainz007
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27312124
复制相关文章
相似问题
腾讯云开发者
