Applying CSS3 PIE border radius to jQuery UI components
Please have a look at the HTML below where I have taken a jQuery UI datepicker and tried to give it round corners in Internet Explorer <= 8 by using CSS3 PIE. The box displays rounded corners but not the datepicker. I have also applied position: relative; z-index: 0 as suggested in the documentation.
&开发者_运维百科lt;!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datepicker').datepicker({
inline: true
});
});
</script>
<style type="text/css">
.roundedCorners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(PIE.htc);
position: relative;
z-index: 0;
}
</style>
</head>
<body>
<div class="roundedCorners" style="width: 100px; height: 100px; background-color: Blue"> </div>
<br />
<div id="datepicker" class="roundedCorners"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datepicker').datepicker({
inline: true
});
});
</script>
<style type="text/css">
.roundedCorners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(PIE.htc);
position: relative;
z-index: 0;
}
.ui-datepicker{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(PIE.htc);
position: relative;
z-index: 0;}
</style>
</head>
<body>
<div class="roundedCorners" style="width: 100px; height: 100px; background-color: Blue"> </div>
<br />
<div id="datepicker" class="roundedCorners"></div>
</body>
</html>
you have to add rounded corners to the specific UI classes!
The modification i made to your example works in FFX, Opera, IE8 and IE8 Compatibility view. It will only show the outer box with rounded corners.
Here is a modification that makes the datepicer look identically in IE8, FFX 3.1.5 and Opera 10
.ui-datepicker-inline div{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(PIE.htc);
position: relative;
z-index: 0;}
.ui-datepicker-inline{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(PIE.htc);
position: relative;
z-index: 0;}
加载中,请稍侯......
精彩评论