关于css控制input样式的有关问题，其实特简单，进来拿分吧~
日期：2014-05-17 浏览次数：20642 次
关于css控制input样式的问题，其实特简单，进来拿分吧~~~
[code=HTML]
<!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=utf-8 " />
<title> csstest </title>
<style>
/*[GOMS12040009]Amend by Lily on 09Apr2012*/
input.text
{
font-size: 12px;
border-width: 1px;
border-color: #AAAAAA;
border-style: solid;
height: 21px;
}
input.readonly
{
border-width: 1px;
border-color: #AAAAAA;
border-style: solid;
height: 21px;
background-color: #EEEFED;
}
span.readonly
{
font-size: 12px;
border:1px;
border-color: #AAAAAA;
border-style: solid;
height: 21px;
background-color: #EEEFED;
}
</style>
<script language= "JavaScript ">
function protectElement(element)
{
var element = document.getElementById(element);
if (element.type == "text ")
{
element.className = "readonly ";
}
}
function unProtectElement(element)
{
var element = document.getElementById(element);
if (element.type == "text ")
{
element.className = " ";
}
}
function checkboxOnclick()
{
if(document.getElementById( "cc ").checked == true)
{
unProtectElement( "aa ");
}
else
{
protectElement( "aa ");
}
}
</script>
</head>
<body>
<form>
<input type= "text " class= "readonly " style= "width:70px; " value= "20000 " id= "aa "/>
<input type= "checkbox " name= "cc " id= "cc " onClick= "checkboxOnclick(); "/>
<span class= "readonly " style= "width:172px "> 20000 </span>
</form>
</body>
</html>
[/code]
问题：
1 点checkbox时候, input 只需要变背景色的,为什么高度和长度会变？
2 “font-size” 对于input 和 span 是不是不同的标准？ 为什么设置同样的size，一个字体大一个字体小？
------解决方案--------------------
样式没写好。
[code=HTML]
<!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=utf-8 " />
<title> csstest </title>
<style>
/*[GOMS12040009]Amend by Lily on 09Apr2012*/
input.text
{
font-size: 12px;
border-width: 1px;
border-color: #AAAAAA;
border-style: solid;
height: 21px;
}
input.readonly
{
border-width: 1px;
border-color: #AAAAAA;
border-style: solid;
height: 21px;
background-color: #EEEFED;
}
span.readonly
{
font-size: 12px;
border:1px;
border-color: #AAAAAA;
border-style: solid;
height: 21px;
background-color: #EEEFED;
}
</style>
<script language= "JavaScript ">
function protectElement(element)
{
var element = document.getElementById(element);
if (element.type == "text ")
{
element.className = "readonly ";
}
}
function unProtectElement(element)
{
var element = document.getElementById(element);
if (element.type == "text ")
{
element.className = " ";
}
}
function checkboxOnclick()
{
if(document.getElementById( "cc ").checked == true)
{
unProtectElement( "aa ");
}
else
{
protectElement( "aa ");
}
}
</script>
</head>
<body>
<form>
<input type= "text " class= "readonly " style= "width:70px; " value= "20000 " id= "aa "/>
<input type= "checkbox " name= "cc " id= "cc " onClick= "checkboxOnclick(); "/>
<span class= "readonly " style= "width:172px "> 20000 </span>
</form>
</body>
</html>
[/code]
问题：
1 点checkbox时候, input 只需要变背景色的,为什么高度和长度会变？
2 “font-size” 对于input 和 span 是不是不同的标准？ 为什么设置同样的size，一个字体大一个字体小？
------解决方案--------------------
样式没写好。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
