How can I get the circle of only the selected radio button to disappear once checked?

  • SalsaStyle
    Asked on September 6, 2017 at 12:55 PM

    Hello JotForm,

    I have being trying to to make my contact form a little bit more atractive for my customers. I wanted to place fonts awesome for the radio buttons but I couldn't. So I use background pngs for it and it works fine. However I would like to make the circle disappear after it is checked living only the png image when selected. Beleave me I've tryed everything I could but nothing helps. Ehither all the circles disapear on the form or none of them.

    There is a css instruction like this:

    .form-radio-item:not(#foo) label:before {
    border: 2px solid #e15353;
    }
     
    if I change border to 0px then all circles disappear. If I add the pseudo selector :after, then it dosn't work. Neither so nor if I try with imput[checked] or input:checked. And if Ichage the opacity value of the instuction:
     
    .form-radio-item:not(#foo) input:checked + label:after {
        opacity: 1;
    }

    to zero, then the png image is the one which desappears.

    Could you give me a tip on how to get the circle of only the selected radio button to disappear onece checked?

    Thank you very much for taking the time to answer.

    Pedro Nataniel

  • Kiran Support Team Lead
    Replied on September 6, 2017 at 2:51 PM

    I understand that you want to hide the circle for the item selected of the radio button field. Please correct me if I misunderstood your query. Please allow me some time to check on this and get back to you with relevant information. 

    Thank you for your patience. 

     

  • SalsaStyle
    Replied on September 6, 2017 at 3:09 PM

    Thank you very much for wanting to help me. I found the solution. I am not a css profi. So I was expecting that I have to use the pseudo class :after. however it works with the :before class which is asigned to it. I just had to ad the "input[type="radio"]:checked " like this:

    .form-radio-item:not(#foo) input[type="radio"]:checked + label:before {
    border: 0px solid red;
    }

    ... and it works now like I wanted.

    Have a nice day!

    Pedro Nataniel

  • Kiran Support Team Lead
    Replied on September 6, 2017 at 4:39 PM

    Great! Glad to know that you were able to get the issue fixed. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help.

    Thank you for using JotForm!