How can I get the time picker to match the other input boxes?

  • Profile Image
    plungefetish1
    Asked on August 21, 2019 at 06:09 PM

    I need to style the IOS7 style time picker on my form so that it looks like the other fields in the form.  I tried injecting the css of other fields into the widget but that did not work.   

    How can I get the time picker to match the others?

    https://form.jotform.com/plungefetish1/plunge-registration-form1566425369arrtg1.PNG

  • Profile Image
    Welvin
    Answered on August 21, 2019 at 07:36 PM

    Hello,

    I did that for you. You can check the custom CSS codes in the widget.

    Guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets.

    input#time {

        max-width: none !important;

        text-align: center !important;

        padding: 4px;

        border: solid 1px #E5E5E5 !important;

        outline: 0;

        font: normal 13px/100% Verdana, Tahoma, sans-serif;

        background: -webkit-gradient(linear, left top, left 25, from(#FFF), color-stop(4%, #EEE), to(#FFF));

        background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);

        box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

        -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

        -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

        color: #2baadf;

        line-height: 20px;

        width: 187px;

        border-radius: 7px;

    box-sizing: border-box !important;

    }