Remove inner shadow of text input

Consistency across browsers

Achieving uniform text input appearance across browsers is like herding cats. Fret not, though; overriding default styles is our secret weapon. To combat the deceptive appearance of an inner shadow, bring forth the power of:

input {
    border-style: solid; /* Your best friend when 'inset' is your enemy */
    border: 1px solid #cccccc; /* Spice up your life with customized border colours */
}


Farewell, borders!

Giving borders the boot can give your interface that clean, minimalistic look you've always dreamt of. To represent this in CSS, simply:

input {
    border: none; /* 'border: 0;' also works if you prefer numbers over words */
}


Focus on the focus state

When fiddling with text input styling, remember the :focus state can be a sneaky saboteur, re-introducing unwanted outlines or shadows. Tame this unruly beast using:

input:focus {
    outline: none;
    box-shadow: none; /* Because who asked for shadows indoors? */
}


Let's talk mobile Safari

Sometimes, mobile Safari likes to provide an unnecessary challenge, much like finding the missing sock from your laundry. Primarily seen with form controls, you could call upon vendor-specific prefixes for reinforcements:

input {
    -webkit-border-radius: 0; /* Apples are meant to be round, inputs are not */
}


Fighting the default state: Round 2

Input fields can sometimes act like rebellious teenagers, attempting to revert to their default styles when you interact with them. To make sure they respect your authority, appearance: none; is your disciplinarian:

input:focus {
    -webkit-appearance: none; /* Chrome, Safari, Opera */
    -moz-appearance: none; /* Firefox */
    appearance: none; /* A universal power move */
}


Accessibility is king!

Removing outlines and shadows may make your design look suave AF. Still, in the realm of accessibility, accessible trumps aesthetic. Always provide enough visual cues for focused elements. Having an alternate plan never hurts:

input:focus {
    outline: 1px solid #333; /* The line between style and usability */
}
