CODEWITHSUNDEEP
htmlcss
four-eyes
four-eyes

Reputation: 12394

Placeholder in HTML Tag <input /> of type "search" and "button" have different colors

Eventhough the same style is applied, the placeholder in the button is a little bit darker. Why is that?

.input-field {
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
  font-family: 'Montsserat', sans-serif;
  font-weight: 400;
  border-radius: 3px;
  font-size: 16px;
  background-color: white;
  opacity: 0.5;
  color: darkgray;
}
<!DOCTYPE html>
<html>
<head>
  <title>Another simple example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <input type="search" class="input-field" placeholder="I am a little bit lighter"></input>
  <input type="button" class="input-field" value="I am a little bit darker"></input>
</body>
</html>

Upvotes: 0

Views: 48

Answers (1)

C3roe
C3roe

Reputation: 96325

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#opaque_text:

Some browsers (such as Firefox) set the default opacity of placeholders to something less than 100%. If you want fully opaque placeholder text, set opacity to 1.

.input-field::placeholder { opacity: 1; color: inherit; }

fixes the issue for me (tested in Chrome only, but I suppose FF will behave the same.)

color: inherit was also needed, I am guessing a default color gets applied via the user agent stylesheet.

Upvotes: 1

Related Questions