CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jay
Jay

Reputation: 280

Change the color of disabled radio button

How to style the disabled radio button to exactly looks like enabled one. But still it should be uneditable.

I tried using readonly attribute but it is not working. I don't want to go for any custom radio buttons. Want to do it with css/javascript/jQuery

Check the image below : disabled radio button is shown with red underline and enabled with blue

enter image description here

Upvotes: 3

Views: 14681

Answers (3)

Jean-Marc
Jean-Marc

Reputation: 61

I haven't tested this in the older versions of the browsers. So in the 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;
}

Upvotes: 6

kosmos
kosmos

Reputation: 4288

As I commented, you can do it using a fake div. You need a parent element to set relative position, then, with a little javascript you can do it fast to all input elements that you want:

// 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"]'));

Check it: jsfiddle

Upvotes: 2

Mathias J&#248;rgensen
Mathias J&#248;rgensen

Reputation: 64

You need to use CSS to accomplish this. Here's a fiddle.

Basically what you need to do is target it with 

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

Upvotes: -2

Related Questions