1---
2title: Use ::placeholder for Input Styling
3impact: LOW
4tags: native, placeholder, input
5---
6 
7## Use ::placeholder for Input Styling
8 
9Use ::placeholder for input placeholder styling, not wrapper elements.
10 
11**Incorrect (custom placeholder node):**
12 
13```tsx
14<div className={styles.inputWrapper}>
15  {!value && <span className={styles.placeholder}>Enter text...</span>}
16  <input value={value} />
17</div>
18```
19 
20**Correct (native ::placeholder):**
21 
22```css
23input::placeholder {
24  color: var(--gray-9);
25  opacity: 1;
26}
27```
28