Skip to content

Instantly share code, notes, and snippets.

@karenpayneoregon
Created May 9, 2025 22:11
Show Gist options
  • Save karenpayneoregon/8cb613cb39a4fd70e45f1c11adb3d753 to your computer and use it in GitHub Desktop.
Save karenpayneoregon/8cb613cb39a4fd70e45f1c11adb3d753 to your computer and use it in GitHub Desktop.
Provides styles for HTML placeholder
input[type="text"],
input[type="email"],
input[type="password"] {
all: unset;
box-sizing: border-box;
display: block;
width: 100%;
max-width: 400px;
padding: 10px 12px;
font-size: 1rem;
background-color: white !important;
color: #000;
border: 1px solid #ccc;
border-radius: 4px;
transition: border-color 0.3s, box-shadow 0.3s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
background-color: white !important;
border: 1px solid #007BFF !important;
box-shadow: none !important;
outline: none !important;
}
input.form-control,
input.form-control:focus,
input.form-control:active,
input.form-control:valid,
input.form-control:invalid {
background-color: white !important;
box-shadow: none !important;
outline: none !important;
}
/* Placeholder styling */
::placeholder {
color: rgb(0, 123, 168);
opacity: 1;
}
::-webkit-input-placeholder {
color: rgb(0, 123, 168);
}
:-moz-placeholder {
color: rgb(0, 123, 168);
opacity: 1;
}
::-moz-placeholder {
color: rgb(0, 123, 168);
opacity: 1;
}
:-ms-input-placeholder {
color: rgb(0, 123, 168);
}
input:placeholder-shown {
border-color: red !important;
}
/* Autofill override for Chromium browsers */
input:-webkit-autofill {
background-color: white !important;
box-shadow: 0 0 0px 1000px white inset !important;
-webkit-text-fill-color: #000 !important;
transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill:focus {
background-color: white !important;
box-shadow: 0 0 0px 1000px white inset !important;
-webkit-text-fill-color: #000 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment