How can I specify the shape of form form fields?

[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?

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

[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?

[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;
}

[ryy705]

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

[papanyquiL]

'Text' input fields are rectangular by default.

[ryy705]

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

[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.

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.

[gaurang4]

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

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.

[gaurang4]

Really nice solution. Thanks ... :)

[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?

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.