Member Avatar for nizuya

I'd like to create an html form using custom images for text inputs, text areas, and submit inputs. The text inputs and areas will just be static images but for the submit button I'd like to use a sprite that matches the rest of my website. I'd like to be able to do this using only CSS and HTML.

Does anyone know of a good tutorial to guide me through this?

Thanks a bunch,
David

  • 5 Contributors
  • 4 Replies
  • 120 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by gujinni

Dani AI

Generated

Short answer: yes — you can do this with just HTML and CSS. was right to point you toward sprites, and is right that inputs accept the same background/box rules you use on divs. Below are two reliable patterns: one for using a static image as the visible shell of a text field, and one for a sprite-driven submit control. Both keep the real form control present (so keyboard and screen readers still work).

Example: static-image text field (wrapper uses the visual art, input is transparent)

<label class="field-shell">
  <span class="visually-hidden">Email</span>
  <input type="email" name="email" placeholder="you@example.com">
</label>

.field-shell {
  display:inline-block;
  background:url('/images/textfield.png') no-repeat;
  width:300px; height:40px; padding:8px 12px;
}
.field-shell input {
  width:100%; height:100%;
  border:0; background:transparent; font:inherit; outline:none;
  padding:0; margin:0;
}

Example: submit button using a horizontal sprite (change background-position on hover/active)

input[type="submit"].btn-sprite {
  width:120px; height:40px; border:0; cursor:pointer;
  background:url('/images/buttons-sprite.png') no-repeat 0 0;
  text-indent:-9999px; overflow:hidden;
}
input[type="submit"].btn-sprite:hover  { background-position:-120px 0; }
input[type="submit"].btn-sprite:active { background-position:-240px 0; }

Quick tips and gotchas:

  • Keep a visible focus style (or add a custom one) so keyboard users aren’t lost.
  • For accessibility, don’t rely on hidden text only; use proper <label> or aria-label on icon-only buttons.
  • For high-DPI screens, provide a 2x sprite and set background-size to the final display dimensions.
  • If default OS controls interfere, add -webkit-appearance:none; where needed and test across browsers.

For form-styling and background-position details see the MDN guides: Styling HTML forms and background-position.

Recommended Answers

All 4 Replies

Member Avatar for matricol

use the same css u are using for divs

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.