更改已禁用单选按钮的颜色

Question

如何将已禁用的单选按钮设置为与启用的单选按钮完全相同。但它仍然应该是不可编辑的。

我尝试使用readonly属性但它不起作用。 我不想去任何自定义单选按钮。想用css / javascript / jQuery

来做

检查下图：禁用的单选按钮显示为红色下划线并启用蓝色

Answer 1

正如我评论的那样，你可以使用假div来做到这一点。您需要一个父元素来设置相对位置，然后，使用一个小的javascript，您可以快速地执行所需的所有输入元素：

// CSS

* { margin: 0; padding: 0; }

.disabled[disabled] {
    color: red;
}

p { position: relative; }

.input_fakediv {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    left: 0;    
}

// HTML

<p>
    <input type="radio" name="group1" value="Milk" id="milk" class="disabled" /> <label for="milk">Milk</label>
</p>
<p>
    <input type="radio" name="group1" value="Milk" id="milk" class="disabled" /> <label for="milk">Milk</label>
</p>

// JS

var $fakediv = $('<div class="input_fakediv"></div>');
$fakediv.insertAfter($('input[type="radio"]'));

检查：jsfiddle

Answer 2

我没有在旧版本的浏览器中测试过这个。所以在 global.css

input[type="radio"]:disabled {
    -webkit-appearance: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 0px;
    background-clip: content-box;
    border: 2px solid #bbbbbb;
    background-color: white;
    border-radius: 50%;
}

input[type="radio"]:checked {
    background-color: black;
}

Answer 3

您需要使用CSS来完成此任务。 Here's a fiddle

基本上你需要做的是用

来定位它

selector[disabled] { /* Styles here */ }