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

Question

**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?

Answer 1

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

Visualization example:

/* Selects an <input> 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;
}

<input
  type="text"
  placeholder="This placeholder is red and not editable."
>

<input
  type="text" placeholder=""
  value="...whereas the input content itself is blue and editable."
>

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