Is it possible to add box shadowing to inputs in forms css?

Question

I have been trying to add some snazzy effects to my input boxes and one I found was box shadowing, I looked at the w3schools tutorial for box shadowing and tried multiple things to add it to my input box:

.l_input {
  box-shadow: 10px;
}

That didn't seem to work for my code. I also tried to use it using a hover pseudo effect and it again didn't work for that, the pseudo code I tried doing:

.l_input {
  box-shadow: 5px;
}
.l_input:hover {
  box-shadow: 10px;
  transition: 2s;
}

And again that didn't seem to work, if this is the right syntax for how the code should work or I am doing a small mistake thanks in advance, I have thought that maybe it isn't supported for inputs, but that sounded weird.

Answer 1

.l_input  {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: 0.3s ease-in-out;
}

/* hover effect  */
.l_input:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

<div class="l_input"> Content <div>