Member Avatar for ryy705

Hello,

Different browsers render form fields differently. Some browsers will make the corners rounded while some will create rectangular fields.

I was wondering if anyone knows how to control this behavior.
Is there a CSS technique for specifying the shape of an input field?

  • 5 Contributors
  • 13 Replies
  • 272 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Short answer: use CSS to control the corners. The property that actually controls corner shape is border-radius — set it to 0 to force square corners or to a pixel/percentage value to round them. Modern browsers honor the standard border-radius, so you usually do not need older vendor-prefixed rules; if very old IE must be supported, plan fallbacks (images or accept native rectangles). (developer.mozilla.org)

If the problem is the SELECT control specifically (as noted), its native arrow and picker are part of the browser UI until you opt out of the native appearance. A common pattern is to remove the native appearance and draw your own arrow via a wrapper and a pseudo-element. Example:

/* wrapper + custom arrow */
.select-wrap { position: relative; display: inline-block; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  padding-right: 2em;          /* room for arrow */
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: .6em;
  top: 50%;
  transform: translateY(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #333;
  pointer-events: none;
}

Note: removing the native appearance can differ by browser and on mobile it may take away the native picker that users expect. Test across platforms and keep keyboard focus visible. (developer.mozilla.org)

File inputs and some form widgets are still tricky (as and experienced). A robust, accessible approach is to style a visible label/button and keep the real input[type=file] accessible but visually hidden (or use the label for attribute to trigger the input). If you replace native widgets entirely, verify keyboard and screen‑reader behavior. See the file-input and form-styling guidance for patterns and accessibility notes. (developer.mozilla.org)

Practical checklist: use border-radius (or border-radius: 0), use appearance: none + a wrapper for selects, avoid stripping native behavior on mobile unless you provide an equal UX, and test keyboard + screen-reader behavior. This builds on the earlier suggestions in the thread while using current, broadly-supported CSS.

Recommended Answers

All 13 Replies

Member Avatar for Phaelax

Unless you explicitly set CSS to control how the control is displayed, the browser renders it its own way by default. You can set the borders, padding, and background image of a text field just as you would any other web component.

Here's a nice example:

commented: good find - missed that one +6
commented: good example +1
Member Avatar for ryy705

I did not see any css on that page specifying the "SHAPE" (90 degree corner VS rounded corner) of input fields. Do you know how to do that?

Member Avatar for papanyquiL

There are different settings for different browsers as far as rounded corners go. For instance, here is an example of how to change the corners in firefox.

#blahblah input {
 -moz-border-radius: 5px;
}

You can even individually set a border radius (-moz-border-radius-topright). You can change the value to give you more or less of a rounded edge. Here's the syntax for Safari.

#blahblah input {
 -webkit-border-radius: 5px;
}
commented: also, good example +1
Member Avatar for ryy705

Thank you. What do I do if I want a rectangular field?

Member Avatar for papanyquiL

'Text' input fields are rectangular by default.

Member Avatar for ryy705

I'm having trouble with the "SELECT" field.

Member Avatar for gaurang4

-moz-border-radius: 5px; is for Firefox
and
-webkit-border-radius: 5px; is for other browser except IE.

In IE it won't work.

Member Avatar for Member #120589

Use just 'border-radius' for Opera. IE needs some heavy lifting via jquery or similar. In short, IE blows.

The only form field I found impossible to style to my liking is the file upload field. As they are rendered completely differently in browsers, js browser detection is required to style successfully. This is not good. The file field unfortunately is not a button + textbox, it's one object. My own workaround was to make a 'faux button' with a transparent strip showing the 'filename area' beneath. It didn't work consistently across different resolutions.

Sorry - not a hijack - if anybody knows of a style system that includes file fields, please post here.

Edited by Member #120589 because: n/a
commented: ran out of complimentary statements! +1
Member Avatar for gaurang4

Yes ....for File Uploading it's not working properly accessible way.

Member Avatar for Member #120589

Doh! Here's a link to show file field styling. It uses the prototype library, so I assume it would be easy enough to port to jquery or just vanilla js.

I've had that kicking around in my bookmarks for ages - didn't even think about it.

Member Avatar for gaurang4

Really nice solution. Thanks ... :)

Member Avatar for ryy705

I am trying to make the select field appear as rectangular boxes in all browsers.
Some browsers will try to give it rounded corners by default.

Does anyone have a solution for this?

Member Avatar for Member #120589

set borders to none or 0:

input[type=text]{
  border:none;
}

Then place a background graphic that has a rectangular shape:

input[type=text]{
  border:none;
  width: 400px;
  background-image: url(images/textbox_bg.gif);
  padding: 4px;
}

Should do it. Width is important to stop text from carrying on beyond the graphic.

commented: nice solution - :) will help a lot +1
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.