Menu
Who I can make the rounded corner for input elements?
I need a way without using javascript and images..
Added:
<!DOCTYPE html>
<html>
<head>
<title>xx</title>
<style type="text/css">
input
{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
</style>
</head>
<body>
<input type="text" value="test" />
</body>
</html>
It does not work in firefox 3.6.12!
603
CSS3 has many new features that benefit web designers. This includes border rounding:
input
{
-webkit-border-radius: 5px; //For Safari, etc.
-moz-border-radius: 5px; //For Mozilla, etc.
border-radius: 5px; //CSS3 Feature
}
You can add a class to your input fields and use that class in this CSS snippet to target certain input elements.
Internet Explorer 8 does not support CSS3. Internet Explorer 9 will hopefully include all of its features.
In regard to your edited question:
"text/css/" should be "text/css".
164
For modern browsers, use the following CSS code:
input {
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
In other words, pretty much exactly what you've done already.
This should get you rounded corners in all major browsers apart from IE.
I suspect the reason it doesn't work is either (a) you're testing it in IE (see below for solution), or (b) because your <style> tag has an incorrect type attribute. You probably don't need the type attribute at all; I'd suggest dropping it entirely (it is usually only seen when loading stylesheets from an external source). If you do keep it, then drop the trailing slash, as that is definitely incorrect.
For IE, the solution is more complicated:
By far the best solution to the CSS3 rounded corners problem in IE is CSS3Pie.
It's an IE-only hack based on an IE feature called CSS Behaviors. This means that non-IE browsers will completely ignore it, and not even have to download the .HTC file that contains the hack.
It generates true rounded corners using IE's VML vector graphics library, so you will never have any jagged edges or mis-matched background colours or patterns.
Although it does have a few known issues, it is under active development, and even the issues it does have are far less problematic than those of any other solution.
CSS Behaviors is based on Javascript -- you won't find a solution to your problem that doesn't use Javascript somewhere along the line (unless you plan to use old fashioned corner graphics for everything), but because it is enclosed in a MS-specific HTC file, other browsers never need to know about it, so you can use normal CSS3 for them without any javascript.
This does mean that in the unlikely event of an IE users having Javascript turned off, then yes, they'll get square corners. But you can be fairly confident they'll be a vanishingly small minority.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
