The difference between CSS attribute selectors and pseudo-elements for input tags-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

The difference between CSS attribute selectors and pseudo-elements for input tags

P粉988025835 2023-09-10 15:43:12

294

**Inside CSS file:**

input[type="text"]{
border: 2px solid red;
}

input::placeholder{

color:green;
}

input[title="google"]{
background-color:black;
color:white;
}

Why are the writing procedures for Type, Placeholder and Title different? Even though the text inside the tag looks the same. How to understand which are attributes and which are elements?

P粉988025835

reply all(1)

P粉8091101292023-09-11 09:14:41 1 floor

input::placeholder selects the placeholder for , while input[attribute="value"] selects > Its attribute value is value. They do different things.

Visualization example:

/* Selects an  with a 'placeholder' attribute */
input[placeholder] {
  color: #2ab7ca;
}

/* Selects the placeholder itself */
input::placeholder {
  color: #ff6b6b;
}


/* Ignore these */

body {
  margin: 0;
  padding: 2em;
}

input {
  display: block;
  margin: 1em 0;
  height: 2em;
  width: 100%;
  padding: 0.5em;
}

NOTE: This answer was converted from a comment because I couldn't find any duplicate targets.