CSS3 Rounded corner for input element without js/images_问答_开发者

CSS3 Rounded corner for input element without js/images

开发者 https://www.devze.com 2023-01-28 16:43 出处：网络

Who I can make the rounded corner for input elements? I need a way without using javascript and images..

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;
   开发者_如何学JAVA -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!

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

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.

the way you do it is correct (for modern browsers), the problem is you wrong opening style tag:

<style type="text/css/">
                    ^^^ this / shouldn't be there

note that the roundet corners won't work in IE with you css, to achive this, you'll have to take a look at http://css3pie.com/ or use images/jsvascript.

CSS 3 will help you.

This style sheet works for input elements also [in modern browsers atleast], although did not tested in IE

 border-radius: 16px; /* half of button size + padding */
-moz-border-radius: 16px;
background: -webkit-gradient(linear, left top, left bottom, from(#8cc0f6), to(#cfe4fa));
background: -moz-linear-gradient(top, #8cc0f6, #cfe4fa);