customization for Radio Buttons in Search Settings

[sdavis]

I am looking to place in Radio Buttons on my Video Search Page, I was wondering if there was an ability to change the styling of the radio buttons to be a more customizable look.

[Ernest Marcinko]

Hi,

Well, radio buttons are pretty tough to customize in general, most solutions require adding different kinds of elements here and there. I have found one pure custom CSS solution, like so:

div.asp_w.asp_sb.searchsettings input[type=radio]:not(old) {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border-radius: 1em;
  border: 5px solid #555 !important;
}

div.asp_w.asp_sb.searchsettings input[type=radio]:not(old):checked{
  border: 5px solid #bb4c4c !important;
}

I don’t think there is any better solution for this at the moment, without major modifications.

[sdavis]

Ernest,

That worked perfect. I just needed to add some code to change the selection dot but I found that earlier in the day how to do that. Please find my complete code below.

/* RADIO STYLES  */

/*Radio Box Before Selection*/

div.asp_w.asp_sb.searchsettings input[type=radio]:not(old) {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
    background: #DDDDDD;
    background-image: none;
    border: solid 2px #7b868c;
    border-radius: 5px;
}

/*Radio Box After Selected*/

div.asp_w.asp_sb.searchsettings input[type=radio]:not(old):checked{
    color: #5B6670;
    background: #5B6670;
    top: -1px;
}

/*Radio Select*/

input[type="radio"]:checked:before {
    content: "";
    display: block;
    position: relative;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    border-radius: 0;
    background: #5B6670;
}

• This reply was modified 6 years, 11 months ago by Ernest Marcinko.

[Author]

Posts