Question 1

How do I style a text input with CSS?

Accepted Answer

Remove native styling with appearance: none or outline: none on focus (always replace with a custom focus indicator). Style with: input { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 0.75rem 1rem; color: #f0f0f0; font-size: 1rem; } input:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 3px rgba(0,123,255,.25); }

Question 2

How do I make a floating label input?

Accepted Answer

Use CSS with a sibling selector: the label sits inside the input wrapper and translates upward when the input has content. .field { position: relative; } label { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); transition: all .2s; } input:focus ~ label, input:not(:placeholder-shown) ~ label { top: 0; font-size: .75rem; background: white; padding: 0 4px; }

Related Tools