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

  • Profile Image
    SalsaStyle
    Asked on September 06, 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

  • Profile Image
    Kiran
    Answered on September 06, 2017 at 02: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. 

     

  • Profile Image
    SalsaStyle
    Answered on September 06, 2017 at 03: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

  • Profile Image
    Kiran
    Answered on September 06, 2017 at 04: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!