Remove border circle from radio input

Question

I wanted to use image instead of regular radio inputs.

I made it this way:

input[type="radio"]{
    content:url('/images/new-home-page/Checkbox.png');
    height:3vh;
    width:3vh;
}
input[type="radio"]:checked{
    content:url('/images/new-home-page/checkedCheckbox.png');
}

Unfortunately, they have circles around them. I have tried to use border:none or text-decoration:none but it doesnt help. Could someone help me with this please?

They look like this now:

Out of interested, why are you using a checkbox image with a radio button interface? Shouldn’t you be using ``s so as not to confuse your user’s expectations of behaviour? — Robin Whittleton, Dec 15 '15 at 10:46
I'm using content because I found some stackoverflow users do it this way. The radio inputs are the right choice because my page users need to pick only one out of these two. It is a typical radio selection — divHelper11, Dec 15 '15 at 11:00

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-15T10:44:03.580

17

I would request you to use the appearance property of CSS, which is responsible for the components like this. So setting the appearance: none will make a kind of display: none to the component's appearance, which is what is needed for you. You are good to use this bit of CSS to make the component not display, while keeping the element in the view:

-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;

Snippet

input {
  content: url('https://i.stack.imgur.com/M3EkO.png');
  height: 16px;
  width: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input:checked {
  content: url('https://i.stack.imgur.com/Ialva.png');
}

Checkbox:
<input type="checkbox" name="" id="" /> <br />
Radios:
<input type="radio" name="Hi" id="" />
<input type="radio" name="Hi" id="" />

Output: http://output.jsbin.com/digebimolu/1

edited Dec 15 '15 at 10:44

answered Dec 15 '15 at 10:16

Praveen Kumar Purushothaman

164,888
24
203
252

@divHelper11 Have a look at the snippet I have added. – Praveen Kumar Purushothaman Dec 15 '15 at 10:23
1

@divHelper11 The only downside this solution has, it won't work on IE 8,9,10,11. Check my answer if you need that. – Asons Dec 15 '15 at 11:11
@LGSon The OP's code `content: url()` doesn't work in IE 10 and below!!! Check this out: http://stackoverflow.com/questions/16132460/css-url-not-recognized-in-internet-explorer-10 – Praveen Kumar Purushothaman Dec 15 '15 at 11:13
1

@PraveenKumar I know, so I switched back to my original answer using `background` for the image, to support IE 8-11. – Asons Dec 15 '15 at 11:16

score 3 · Answer 2 · answered Dec 15 '15 at 10:25

3

You must hide radio buttons and add more elements like <span> and <label>

Here is how it should work: http://jsfiddle.net/etz9Lfat/

answered Dec 15 '15 at 10:25

MurDaD

362
3
10

1

You must add code to your answer. Shouldn't just link to jsfiddle. – Praveen Kumar Purushothaman Dec 15 '15 at 10:33
@PraveenKumar it needs only a small explanation, which you can see on the top – MurDaD Dec 15 '15 at 10:35
@PraveenKumar your answer has no explanation at all BTW :) – MurDaD Dec 15 '15 at 10:39

Asons · Answer 3 · 2015-12-15T11:10:38.620

Here is a another interesting solution, using pseudo element, where you also get rid of the surrounding focus outline.

The really good with this is it works on IE 8-11 as well, which unfortunately the better solution using appearence don't.

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    position: relative;
    padding-left: 54px;
    cursor:pointer;
    font-size: 26px;
}
input[type="radio"] + label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -22px;
    width:46px;
    height:46px;
    background: url('https://i.stack.imgur.com/M3EkO.png');
    background-size: contain;
}
input[type="radio"]:checked + label:before {
    background: url('https://i.stack.imgur.com/Ialva.png');
}

<input id="cb" value="1" name="cb" type="radio">
<label for="cb">Text 1</label>
<input id="cb2" value="2" name="cb" type="radio">
<label for="cb2">Text 2</label>

Aytee · Answer 4 · 2015-12-15T10:25:13.237

i would suggest a whole other solution.

input[type="checkbox"], input[type="radio"] {
    display:none;
}
input[type="checkbox"] + label{
    padding-left:35px;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:52px; /* width of the checkbox */
    height:53px; /* height of the checkbox */
    margin:-1px 10px 0 -35px;
    vertical-align:middle;
    background:url('https://i.stack.imgur.com/M3EkO.png')  left top no-repeat;
    cursor:pointer;
}

/* replaces the image if checked.*/
input[type="checkbox"]:checked + label span {
    background:url('https://i.stack.imgur.com/Ialva.png') left top no-repeat;
}

<input id="cb" value="" type="checkbox">
<label for="cb"><span></span> Text</label>

With this Solution you wont have any Problems in all browsers. It will hide the checkbox itself, but it still works because you can click the label, which is connected to the checkbox. In this label there is a span with your background image and the sizes of it. So it still looks like a checkbox and your hidden checkbox will be "checked" or "unchecked"

score 0 · Answer 5 · answered Dec 15 '15 at 10:11

0

Add this in your css file:

input[type=radio]{
    display:none;
}

answered Dec 15 '15 at 10:11

G.L.P

7,119
5
25
41

Seriously? `display: none`? – Praveen Kumar Purushothaman Dec 15 '15 at 10:13
Thank you for the answer. `display:none` makes my checkboxes disapear. Am I doing it wrong? – divHelper11 Dec 15 '15 at 10:13
@divHelper11 GLP is wrong. Don't worry. Getting you a correct solution. – Praveen Kumar Purushothaman Dec 15 '15 at 10:13
@Praveen: What do you think about this then, If I'm wrong http://stackoverflow.com/questions/8528860/radio-button-styling.. For some problem, we can have multiple solutions, I showed my way of answer, If you have separately, well & good, For that dont tell blindly, my answer is wrong – G.L.P Dec 15 '15 at 10:17
@G.L.P Please use common sense. There is only one element, `` and you are removing it out of the view. How on earth will it display then? – Praveen Kumar Purushothaman Dec 15 '15 at 10:19
@G.L.P In the example you have given, there's another element ``, which is `label`. Can't you see that? Now do you say, will your solution help? – Praveen Kumar Purushothaman Dec 15 '15 at 10:20
OP asked only for border, and there was no demo, I just shared my opinion.. like you do – G.L.P Dec 15 '15 at 10:22
I mean, it is evident from the CSS that there's only one single element, and do you still agree your answer doesn't work. Sorry if I am rude or something. `:(` – Praveen Kumar Purushothaman Dec 15 '15 at 10:32

score 0 · Answer 6 · answered Oct 13 '22 at 14:09

Here is a simple work around to get customized radio buttons https://jsfiddle.net/sudheer219/fj8heLcp/

Code: [HTML]

<ul>
    <li>
        <input type='radio' value='1' name='radio' id='radio1'/>
        <label for='radio1'><span></span>Value 1</label>
    </li>
    <li>
        <input type='radio' value='2' name='radio'  id='radio2'/>
        <label for='radio2'><span></span>Value 2</label>
    </li>
    <li>
        <input type='radio' value='3' name='radio'  id='radio3'/>
        <label for='radio3'><span></span>Value 3</label>
    </li>
</ul>

[CSS]

ul {
  list-style: none;
}

li {
  display: inline-block;
  margin-right: 15px;
}

input {
  visibility: hidden;
}

label {
  cursor: pointer;
}

input:checked+label span {
  background: red;
}

span {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px inset #444;
  position: relative;
  top: 3px;
  margin-right: 4px;
}

This answer does not address the question as the radio input is still circle, while the question asks how to remove the circle — fauzimh, Oct 18 '22 at 03:22

Remove border circle from radio input

6 Answers6

Linked