How to get rid of outset/inset on input field?

  • theryno
    Asked on April 9, 2016 at 3:55 PM

    I'm wanting to have a simple single color input field that has no effects but even when i turn down the border style to "0" I still get an outset/inset effect. How do I turn this off?

    Here's what I have....

    How to get rid of outset/inset on input field? Image 1 Screenshot 20

    The fields have a border as you can see. I'm wanting them to look like the "Submit" button, with no border. Is this possible?

  • jonathan
    Replied on April 9, 2016 at 4:25 PM

    I checked your form http://www.jotform.us/form/60994592818169 , but currently I see a different colors on the form compared to the screenshot images you had provided. So I am not sure at this time if you have resolve the issue already.

    How to get rid of outset/inset on input field? Image 1 Screenshot 20

    But I think you were referring to the box shadow style of the CSS

    Try this code 

    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input {

        box-shadow: 0px;

    }

    Let us know of the result.

     

     

     

     

  • theryno
    Replied on April 9, 2016 at 5:21 PM

    I should have stated this first but Im using Adobe Muse to insert the form and that is the result I am still getting. I assume I am supposed to insert that code on the CSS section of the designer correct? It did not change anything. In my designer window I am getting the same as you, it looks fine until I put it into muse. Any idea whats going on?

  • Kevin Support Team Lead
    Replied on April 9, 2016 at 11:08 PM

    Yes, you need to paste the code provided by Jonathan above in the Designer, this should remove the box shadow effect from the fields in your form. 

    Seems like this style is being applied when you add the form into Adobe Muse, may we know how are you adding your form? 

    It could be other style there overwriting the code that you add, the one provided by my colleague above. 

    Please, double check if where you are adding the form is clean and there is not other code affecting the form. 

  • theryno
    Replied on April 12, 2016 at 12:54 AM

    Im adding the form by following your directions on the jotform site. Going to Publish -> Platforms -> Muse -> Copy code -> Right click in muse -> Past. Ive copied the code into the CSS on jotform and its still not getting rid of it. Still not sure what to do. I am adding no other code in muse. Its not muse bc I previewed in jotform and it still has the white lines...see pics.

    How to get rid of outset/inset on input field? Image 1 Screenshot 30 

    How to get rid of outset/inset on input field? Image 2 Screenshot 41

  • jonathan
    Replied on April 12, 2016 at 2:01 AM

    I could not find the URL of your website where you have embedded the form. 

    Please share also to us the URL so that we can check the actual form in your on your muse website.

    I can see you have already properly added the CSS code suggested on your form http://www.jotform.us/form/60994592818169

    How to get rid of outset/inset on input field? Image 1 Screenshot 20

     

     

    We will wait for your updated response.

    Thanks.

  • theryno
    Replied on April 13, 2016 at 1:08 AM

    You can find the form at.....

    http://test.devoutsounddesign.com/contact.html

    Thank you for the help so far.

  • jonathan
    Replied on April 13, 2016 at 3:28 AM

    Thank you for providing to us the requested info.

    I have it corrected on your form http://www.jotform.us/form/60994592818169 on the injected CSS code.

    How to get rid of outset/inset on input field? Image 1 Screenshot 30

     

    It seems to be working on your website now when I checked.

    How to get rid of outset/inset on input field? Image 2 Screenshot 41

     

    Let us know if there is more we can help you with.

    Thanks.

  • theryno
    Replied on April 13, 2016 at 1:55 PM

    Amazing! Thank you so much, I love jotform, you guys are great!