Remove inner shadow of text input

html

responsive-design

css

accessibility

byNikita Barsukov·Sep 14, 2024

To eradicate the inner shadow in text input fields, set the CSS appearance to none. This nullifies the default browser styles. In Safari, specifically target and nullify the search input decorations using ::-webkit-search-decoration and akin pseudo-elements. Here's the rundown:

input[type="search"] {
    -webkit-appearance: none; /* Chrome, Safari, Opera */
    -moz-appearance: none; /* Firefox */
    appearance: none; /* More browsers than you can shake a stick at */
}

/* Safari: Hide and Seek Champions 2021 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
    display: none;
}

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 */
}

explain-codes / Html / Remove inner shadow of text input

Linked

Css Inset Borders



How can I change the thickness of my `` tag



How to get equal width of input and select fields



Css selector for text input fields?



Css strikethrough different color from text?



Remove border from buttons



Changing the color of an hr element



Consistency across browsers Farewell, borders!Focus on the focus state Let's talk mobile Safari Fighting the default state: Round 2 Accessibility is king!