Home/ Questions/Q 7025829
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T00:01:55+00:00

I am using javascript to add a red glow using CSS box-shadow to form

  • 0

I am using javascript to add a red glow using CSS box-shadow to form fields that are incorrectly filled. I am running into a problem with my file input field, in Firefox the glow extends around the browse button and I am also unable to remove the default border.

Is there a way to achieve this with CSS?

Thanks.

Here is an example –

enter image description here

HTML

<input type='file' id='userfile' name='userfile' maxlength='80' class='form-input'/>

CSS class being assigned

.field-error { -webkit-box-shadow: 1px 1px 5px 5px #ff0000; -moz-box-shadow: 1px 1px 5px 5px #ff0000; box-shadow: 1px 1px 5px 5px #ff0000; border: none; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Though this is not a standard way to achieve this, but you a kind of create a div around the file element give a box shadow to a div and use width to get around this, but again this will work only for firefox, since chrome has a different way of presenting the file upload element.

    for example something like this

    • 0