Member Avatar for kavithakesav

I m workng in one website for that i need css for all fields like textfields, textarea, radiobutton, checkbox, submitbutton, etc...

Can any one help on this... and one more thing for radiobutton and checkbox i do't want that 3d effect.

  • 4 Contributors
  • 4 Replies
  • 126 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by sreein1986

Dani AI

Generated

For : modern CSS can style textfields, textareas and buttons easily. Checkboxes and radios used to be hard to change, but now there are two practical CSS approaches: a lightweight custom UI built with appearance: none + pseudo-elements, or the simpler accent-color for changing fill color. was right that older techniques relied on JS, but today CSS covers most needs. ’s note about border, padding and colors is a useful starting point.

A compact starting style for text inputs, textareas and buttons:

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, textarea:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74,144,226,.12);
}

button, input[type="submit"] {
  padding: .5rem 1rem;
  border: 1px solid #2a7ae2;
  background: #2a7ae2;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

A CSS-only pattern to replace the native checkbox/radio visuals (keeps input accessible; input before label):

/* hide native control but keep it focusable */
input[type="checkbox"],
input[type="radio"] { position: absolute; opacity: 0; }

/* draw the box/circle on the label */
input + label.custom::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 8px;
  border: 1px solid #666;
  background: #fff;
  border-radius: 3px;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label.custom::before {
  background: #2a7ae2;
  border-color: #2a7ae2;
}

/* focus ring */
input:focus + label.custom::before {
  box-shadow: 0 0 0 3px rgba(42,122,226,.18);
}

Simple alternative: input[type="checkbox"], input[type="radio"] { accent-color: #2a7ae2; } for modern browsers.

Testing and accessibility notes: always link labels with for (or wrap input in label), preserve keyboard focus and visible focus styles, test on iOS/Android (use -webkit-appearance: none when needed), and provide a JS fallback for very old browsers. For browser support and details see MDN on appearance and the Styling web forms guide.

Recommended Answers

All 4 Replies

Member Avatar for buddylee17

CSS can't do much with checkbox's or radio buttons. a tut on styling a form with CSS.
If you want custom checkbox's and radio buttons you'll need to add some JavaScript.
Here's a link for this.

Member Avatar for buddylee17

luap, I looked at your link but, didn't see any custom radio buttons or check boxes.

Member Avatar for sreein1986

in our CSS please use these properties to check box, textbox and radio button its looking good
border size, styles, border colors and padding

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.