0

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
15
Views
7 Years
Discussion Span
Last Post by diafol
Featured 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: [url]http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/[/url] Read More

  • 1
    diafol 3,669   7 Years Ago

    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 … Read More

  • 1
    diafol 3,669   7 Years Ago

    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. [url]http://valums.com/wp-content/uploads/ajax-upload/demo-prototype.htm[/url] I've had that kicking around in my bookmarks for ages - didn't even think about it. Read More

  • 2
    diafol 3,669   7 Years Ago

    set borders to none or 0: [CODE]input[type=text]{ border:none; }[/CODE] Then place a background graphic that has a rectangular shape: [CODE]input[type=text]{ border:none; width: 400px; background-image: url(images/textbox_bg.gif); padding: 4px; }[/CODE] Should do it. Width is important to stop text from carrying on beyond the graphic. Read More

0

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?

1

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;
}
Votes + Comments
also, good example
0

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

0

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

In IE it won't work.

1

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 diafol: n/a

Votes + Comments
ran out of complimentary statements!
0

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?

2

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.

Votes + Comments
nice solution - :) will help a lot
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.