customization for Radio Buttons in Search Settings

Home Forums Product Support Forums Ajax Search Pro for WordPress Support customization for Radio Buttons in Search Settings

This topic contains 2 replies, has 2 voices, and was last updated by

 
Participant
2 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23434

    Participant

    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.

    #23457

    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.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #23462

    Participant

    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;
    }
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.