Home » Jquery » javascript – Set the box-shadow style-Exceptionshub

javascript – Set the box-shadow style-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

how to make a box-shadow like this? with css or javascript.

This is the stackoverflow form login.

enter image description here

How to&Answer:

It depends on the browser but you can use this one:

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid red;
}

input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(25, 65, 222, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(25, 65, 222, 1);
}

Answer:

You can use this:

input[type=text]{
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #37abff;;
    border-radius: 2px;
}   
input[type=text]:focus{
    box-shadow: 0 0 1px 3px #c7e7fed7;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #87c8f9;
}
<input type="text" />