How to customize radio button style

  • Profile Image
    sanaullahrais
    Asked on April 03, 2014 at 02:16 PM

    please add customize you drop down menu it,s not a beautiful and radio buttons are not beatiful,if we want to add radio button using your widgets then logic conditions are not working



    This is a re-post of a comment on 7 Useful JotForm Features You Probably Didn't Know About

  • Profile Image
    TitusN
    Answered on April 03, 2014 at 03:48 PM

    Hello,

    Please share the URL or title of your form so that we can assist in:

    1. Perhaps making the normal drop-down and radio buttons from the form tools beautiful using Custom CSS which you can inject in your form

    2. While not all widgets will work well with conditional logic, you may try and tell us what you want to achieve and we can reccomend ways in which you can accomplish that.

    Looking forward to your response.

  • Profile Image
    sanaullahrais
    Answered on April 04, 2014 at 02:18 AM
  • Profile Image
    sanaullahrais
    Answered on April 04, 2014 at 02:19 AM

    this is my form please make radio field beautiful,I mean radio buttons are not beautiful..Please help me to make these radio  buttons beautiful

  • Profile Image
    sanaullahrais
    Answered on April 04, 2014 at 02:22 AM

    and also tell me how can we can add hover affect on image

    here is the example given

    http://www.fbs.com/

    visit this link and click on images which are given on the header of website.

    please tell me how can i create this types of images.

     

    Looking forward to your response.

     

  • Profile Image
    EltonCris
    Answered on April 04, 2014 at 04:06 AM

    @sanaullahrais

    Dou like this radio button style? http://form.jotform.co/form/40036523992858?

    If you like, inject this CSS codes to your form. This should bring radio button style into the next level. :)


     

    input[type=radio].form-radio {

    display:none;

      }input[type=radio].form-radio + label {
      padding-left:26px;
      height:22px;
      display:inline-block;
      line-height:22px;
      background-repeat:no-repeat;
      background-position: 0 0;
      font-size:17px;
      vertical-align:middle;
      cursor:pointer;}input[type=radio].form-radio:checked + label {
      background-position: 0 -21px;
      }input[type=radio] + label {
      background-image:url(https://shots.jotform.com/elton/radio_flat.png);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      }

    You can also take it here: http://pastebin.com/raw.php?i=u6HknDHx

    Hope you like it. Cheers!

  • Profile Image
    sanaullahrais
    Answered on April 04, 2014 at 12:19 PM

    Hi @EltonCris

    I love you and love your support and your forms thank you man,you,re the best.You have solve my problem,will you please give me more radio buttons themes using css.

    I have one problem with drop down please solve this here my form is given

    http://form.jotform.me/form/40931557786466

    Problem 1.Please give me the beautiful css code for drop down.

    I want to make drop down  beautiful like radio button.

    Please solve my this problem.

    Problem 2. Please tell me how can  i add hover affect on image here example is given

    http://www.fbs.com/

    Please click on images which are given to the head of this website.

    I want to create these types of images and i want to add into my website.

    Please  EltonCris solve my these two problems.

    I am looking for your responce.I hope you will solve my problem as you before.

  • Profile Image
    sanaullahrais
    Answered on April 04, 2014 at 12:23 PM

    Hove affect examples are given here..This will help you to solve my problem

    http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/

    Please check these examples which are given in this website

  • Profile Image
    EliezerN
    Answered on April 04, 2014 at 02:13 PM

    On behalf of my colleague you are very welcome. It is good to know that you liked the Radio Button style.

    We will be more than glad to assist you with the last requests, however, we would appreciate if you opened separated threads per each different request.

    That will allow us to give you the correct assistance in a more organized and efficient way. You can simply copy and paste the information you have shared here into the new threads. Here is the link to open new thread: http://www.jotform.com/answers/answer.php

    Thanks