Background can be a simple gradient or high light background and then repeat-x, the border directly set border on it, it seems that the idea is not a problem
IE9,IE8 did not find any problems, IE7 or IE6 will appear black box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>
<title>input button plus background, IE7 or IE6 will appear black box </title>
<style type= "Text/css" >
<!--
. HK {
height:22px;
border: #999 1px solid;
background: #E5E5E5 URL (pn.png) repeat-x 0 0;
Cursor:pointer;
}
-->
</style>
</head>
<body>
<input type= "Submit" name= "Submit" value= "Landing" class= "HK" style= "width:70px;"/>
</body>
</html>
Solution:
1, if set Border:none, that is to say do not border, then this black box is not, so a solution is to directly write the box to the background, and then remove border, that is, set Border:none. The background of this button style is listed. The disadvantage of this approach must be clear, that is, the flexibility is poor, how many size buttons to prepare the size of the background
2, Input button to remove the frame line (Border:none), and then the input outside the sleeve Label,border written to the label, because the input was removed border, so will not appear black box, while the outside label has border, So the user can see the normal box line, of course, because of the characteristics of the label, you click on the label is equal to click on the input button, oh, right, in order to simulate a little better, you can set their cursor for pointer
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>
<title>input button plus background, solve IE7 or IE6 will appear black box </title>
<style type= "Text/css" >
<!--
. pn {
height:22px;
Border:none;
background: #E5E5E5 URL (pn.png) repeat-x 0 0;
Cursor:pointer;
}
. L_PN {
Display:block;
border: #999 1px solid;
}
-->
</style>
</head>
<body>
<label class= "L_PN" style= "width:70px"; >
<input type= "Submit" name= "Submit" value= "Landing" class= "pn" style= "width:70px;"/>
</label>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
