What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    change selected textbox's border

    Asked by wakemeup 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

    Page URL:
    http://wmu-clothing.com/Billing-info-1

    Screenshot
    textbox selected JotForm
  • Profile Image
    JotForm Support

    Answered by NeilVicente 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

    Answered by wakemeup 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
    JotForm Support

    Answered by TitusN 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

    Answered by wakemeup 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
    JotForm Support

    Answered by KadeJM 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

    Answered by wakemeup 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
    JotForm Support

    Answered by EltonCris 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

    Answered by wakemeup on February 06, 2014 at 06:24 AM

    Hi Guys

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