change selected textbox's border

  • Profile Image
    wakemeup
    Asked on February 05, 2014 at 02:22 AM

    HI JotForm

    How can i change the textbox's border that i'm selecting or typing?

    i would like solid 3px black border intead of blur grey border.

     

    thank you

    wmu-clothing

  • Profile Image
    NeilVicente
    Answered on February 05, 2014 at 04:10 AM

    Inject these codes to your form:

    input:focus, textarea:focus {
       border: 3px solid #000000
    }

    How to inject custom CSS?

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image
    wakemeup
    Answered on February 05, 2014 at 05:04 AM

    Thank you NeilVicente, it works.

     

    Can i ask anothers question

    one is that why my .form-textarea dont appear red border when it is incorrect, and how can i fix it?

    two is how can i remove the inner shadow of textbox?

     

    (1)

     

    (2)

  • Profile Image
    TitusN
    Answered on February 05, 2014 at 09:09 AM

    Hello,

    When I tested your form (both on your website, and using the Jotform URL)The red border on uncompleted required fields appears as expected:

    I tried this across windows, linux and Mac - same result. 

    What browser(version) and operating system were you running on when you experienced this behavior?   

    ****

    To remove the inner shadow, add the following CSS rules to your form:

    #input_20, #input_18,#input_15,#input_13,#input_3,#input_10,#input_12,#input_9 {
    border: 1px solid grey;
    }

    Does that help? You can change the border color to any other value.

    Please let us know.

  • Profile Image
    wakemeup
    Answered on February 05, 2014 at 02:51 PM

    Hi TitusN

    Thank you for fast answer, my os is mac osx 10.9.1, browser are firefox 26.0, safari 7.0.1, chrome 32.0.1700.107.

    Also, i found out something weird, that is the codes NeilVicente gave me working only on text-area, but not text-box, how can i fix it?

    (text-box) testing on firefox, safari, chrome

    (text-area) testing on firefox, safari, chrome

    And i succeed to remove the blur border by using your codes,  it works great only on firefox, but not on safari and chrome, so how can't i fix it?

    testing on firefox

    testing on safari

    testing on chrome


    Btw, i still can't see the the red border on uncompleted required text-area on 3 browser(firfox, safari, chrome)

  • Profile Image
    KadeJM
    Answered on February 05, 2014 at 04:07 PM

    We found the problem. There's nothing wrong with Neil's Code. The reason you're not seeing it work for those last 3 fields is because you're requirement is not turned " ON " for those fields so that is why this is happening. Just switch it to " ON " and they will highlight as well. As for the blurr effect in the other browsers I didn't experience that problem so I will try to figure that out more.

  • Profile Image
    wakemeup
    Answered on February 06, 2014 at 12:24 AM

    Hi Kade JM

    thank for your answer, the 3 fields you mention are not requirement as i want, all red border of textbox work great, but not textarea (only 2 on my form).

    btw Neil's code work perfect when i remove the code TitusN gave me.

    #input_20,#input_18,#input_15,#input_13,#input_3,#input_10,#input_12,#input_9,#input_14 {
    border: 1px solid grey;
    }

    which means i can't remove inner shadow, so can i have both working at same time(no inner shadow & focus black border)?

  • Profile Image
    EltonCris
    Answered on February 06, 2014 at 02:28 AM

    @wakemeup

    To remove the browser's default inner shadow, you should add a border on your textbox fields. Try it with the following.

    .form-textbox {

    border: 1px solid #DDD;

    box-shadow: none; /*-add this just in case-*/

    }

    Regarding on the red border on textarea fields on error state, there is currently an issue in it when you add 'Hint' to your textarea field. Removing the field hint should restore the red border on error mode for this field. Or, you can use Hover Text instead of Hint Example as seen on this screenshot.

    Let us know should you have further questions. Thanks!

  • Profile Image
    wakemeup
    Answered on February 06, 2014 at 06:24 AM

    Hi Guys

    After trying all things, all works great and perfect. thank you all very much.