Placeholder in HTML Tag <input /> of type "search" and "button" have diffe-CodePudding

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"  placeholder="I am a little bit lighter"></input>
  <input type="button"  value="I am a little bit darker"></input>
</body>
</html>

CodePudding user response：

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.

CodePudding user response：

The placeholder text in the input field appears lighter because of the color property set to darkgray in the CSS class input-field. The text in the button appears darker because the color property is not applied to the button element. The default text color for buttons is determined by the browser's CSS.

.input-field {
  /* rest of the styles */
  color: darkgray;
}

input[type="button"] {
  color: darkgray;
}

In this example, the CSS class input-field sets the text color of the placeholder text to darkgray. The second CSS rule specifically targets input elements with a type attribute of "button" and sets their text color to darkgray as well. This will make sure the text color for both the placeholder and the button is the same.

<input type="search"  placeholder="I am the same color"></input>
<input type="button"  value="I am the same color"></input>