How to style input and submit button with CSS?

html

responsive-design

css

web-development

byNikita Barsukov·Oct 24, 2024

Here's how to spruce up your input fields and submit buttons with CSS:

/* TEXT INPUTS: 🦊 Fox says, "Don't forget me!" */
input[type="text"] {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px; /* Because these corners ain't sharp enough... */
}

/* SUBMIT BUTTONS: Like a chameleon, they change */
input[type="submit"] {
  padding: 10px;
  color: #fff;
  background-color: #5cb85c;
  cursor: pointer; /* Because it won't lick your pointer 🐕 */
}

/* Hover an umbrella over it and it changes color! ☂️ */
input[type="submit"]:hover {
  background-color: #449d44;
}

/* The matrix has you... see it glow! */
input[type="text"]:focus {
  border-color: #66afe9;
}

Just copy-paste these snippets to give your form a quick makeover. Feel free to tweak the padding, border, and background-color to match your theme.

Specific targeting: Dial the CSS aim

Pinpoint styling with attribute selectors

Avoid friendly fire, use attribute selectors to accurately style the right form elements. Use type attribute to explicitly target text inputs:

input[type="text"] {
  padding: 12px 20px; /* Like teddy bear stuffing 🧸 */
  border: 1px solid #ccc; /* Pencil thin border ✏️ */
  border-radius: 4px; /* Guess what? More rounded corners! */
}

Guide user's attention with focus styling

Guide user attention with a beacon - the :focus pseudo-class. It highlights the currently active text field. Like a lighthouse in the night:

input[type="text"]:focus {
  outline: none; /* Engage stealth mode */
  box-shadow: 0 0 3px #66afe9; /* Hello, Tron bike effect! */
}

Submit buttons: Just got an upgrade

Submit buttons require a mix of contrast, padding, and perhaps even gradients. Here's how to achieve that:

/* A submit button so beautiful, your mom clicks it twice */
input[type="submit"] {
  padding: 10px 15px;
  border: none;
  border-radius: 5px; /* To infinity... and 5px beyond! */
  background-image: linear-gradient(to right, #57a0ee, #355f7c);
  color: white;
  text-transform: uppercase; /* Because shouts stand out! 😲 */
  transition: background-color 0.25s; /* For that *smooth criminal* feel */
}

/* Hover effect: Submit button went to a rave! 🌈 */
input[type="submit"]:hover {
  background-image: linear-gradient(to right, #355f7c, #57a0ee);
}

Refining interactivity: Don't keeps users guessing

Hover effect: Form elements playing peekaboo

A :hover state shouldn't just be an afterthought. It guides users through your form with a welcome mat.

Button element: The Swiss army knife

Consider replacing <input type="submit"> with <button> for more styling options. It opens up possibilities like placing images or SVG icons inside the button.

Labels: No more guessing games!

Good label styling helps users quickly understand what information goes where. Here's a quick example:

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold; /* Like your morning coffee ☕ */
}

Responsive like a cat: Make forms fit all screens

Keeping form fluid: Avoid spilling outside the viewport

Use relative units (%, em, rem) instead of pixels (px) to keep your form fitting snugly in all screen sizes.

Flexing with media queries: Not just posing, it's practical!

Media queries are your form's secret weapon for transforming seamlessly across all device sizes:

@media (max-width: 768px) {
  input[type="text"], input[type="submit"] {
    width: 100%;
    box-sizing: border-box; /* Like fitting a square peg in a square hole */
  }
}