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?

Recommended Answers

All 13 Replies

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:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

commented: good find - missed that one +6
commented: good example +1

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?

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

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

'Text' input fields are rectangular by default.

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

-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

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.

commented: ran out of complimentary statements! +1

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

Member Avatar

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.

http://valums.com/wp-content/uploads/ajax-upload/demo-prototype.htm

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

Really nice solution. Thanks ... :)

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

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, learning, and sharing knowledge.