How to customize radio button in html

后端未结

关注

 4  1475

轻奢々

I am trying to get radio button like this..

$\"enter$

But I am getting like this

相关标签:

4条回答

暖寄归人

2020-12-09 23:31

You can achieve desired layout in two ways

Via removing standard appearance using CSS appearance and applying custom appearance. Unfortunately this was doesn't work in IE for Desktop (but works in IE for Windows Phone). Demo:

input[type="radio"] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
.flex {
  display: flex;
  align-items: center;
}

<div class="flex">
  <input type="radio" name="radio" id="radio1" />
  <label for="radio1">RadioButton1</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio2" />
  <label for="radio2">RadioButton2</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio3" />
  <label for="radio3">RadioButton3</label>
</div>

Via hiding radiobutton and setting custom radiobutton appearance to label's pseudoselector. By the way no need for absolute positioning here. Demo:

*,
*:before,
*:after {
  box-sizing: border-box;
}

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

input[type="radio"] + label:before {
  content: "";
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  margin-right: 3px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
label {
  display: flex;
  align-items: center;
}

<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>

0 讨论(0)

礼貌的吻别

2020-12-09 23:38

You should format your radio button both uncheck and checked.

You can find your anwser follow block code:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        /* Radio Button CSS*/
        label {
            display: inline;
        }
        .radio-1 {
            width: 193px;
        }
        .button-holder {
            float: left;
            margin-left: 6px;
            margin-top: 16px;
        }
        .regular-radio {
            display: none;
        }
        .regular-radio + label {
            background-color: #fafafa;
            border: 2px solid #cacece;
            border-radius: 50px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
            display: inline-block;
            padding: 11px;
            position: relative;

        }
        .regular-radio:checked + label:after {
            background: none repeat scroll 0 0 #94E325;
            border-radius: 50px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
            content: " ";
            font-size: 36px;
            height: 8px;
            left: 7px;
            position: absolute;
            top: 7px;
            width: 8px;
        }


        .regular-radio:checked + label {
            background-color: #e9ecee;
            border: 2px solid #adb8c0;
            color: #99a1a7;
            padding: 11px;
        }
        .regular-radio + label:active, .regular-radio:checked + label:active {
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        }

        /*----------------hungtq added--------------*/
        .regular-radio + label:before {
            background: none repeat scroll 0 0 #e9ecee;
            border-radius: 50px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
            content: " ";
            font-size: 36px;
            height: 8px;
            left: 7px;
            position: absolute;
            top: 7px;
            width: 8px;
        }
    </style>
</head>
<body>
<div class="button-holder">
    <input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br>
    <input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br>
</div>
</body>
</html>

Result: enter image description here

0 讨论(0)

死守一世寂寞

2020-12-09 23:40

input[type=radio].css-checkbox {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}
input[type=radio].css-checkbox + label.css-label {
    padding-left: 30px;
    height: 25px;
    display: inline-block;
    line-height: 25px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 25px;
    vertical-align: middle;
    cursor: pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
    background-position: 0 -25px;
}
label.css-label {
    background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_98809849d4d88f570f5ad4ce6c2be5b1.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

check out this fiddle.

0 讨论(0)

迷失自我

2020-12-09 23:43
Just add the :before pseudo element to take care of the color before the radio button is checked. You could add this to your CSS:
```
 .regular-radio + label:before {
  background: none repeat scroll 0 0 #FDFDFD;
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
  content: " ";
  font-size: 36px;
  height: 8px;
  left: 7px;
  position: absolute;
  top: 7px;
  width: 8px;
}
```
Working demo. You can ofcourse change the background of this label to match exactly the example you show. Hope it helps.
0 讨论(0)
发布评论:

提交评论
- 加载中...