关于css控制input样式的问题，其实特简单，进来拿分吧~_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:10:111386浏览
<!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> 问题：
1 点checkbox时候, input 只需要变背景色的,为什么高度和长度会变？
2 “font-size” 对于input 和 span 是不是不同的标准？ 为什么设置同样的size，一个字体大一个字体小？
回复讨论(解决方案)
样式没写好。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type " content="text/html; charset=utf-8"/> <title> csstest </title> <style> *{ margin:0; padding:0;} body{font:12px/2 arial;} .default_input{ height:19px; line-height:19px;} .text{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{border:1px;border-color:#AAAAAA;border-style:solid;height:21px;background-color:#EEEFED;} </style> <script> 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 = "default_input"; } } 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> 一般设置的时候需要注意一下，特别是高度和行高保持一致，另外还需要注意就是设置内边距
高度和宽度还是会动啊
我改好了
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script> <br /> function protectElement(element) { <br /> var element = document.getElementById(element); <br /> if (element.type == "text") { <br /> element.className = "readonly "; <br /> } <br /> } <br /> function unProtectElement(element) { <br /> var element = document.getElementById(element); <br /> if (element.type == "text") { <br /> element.className = ""; <br /> } <br /> } <br /> function checkboxOnclick(){ <br /> if (document.getElementById("cc").checked == true) { <br /> unProtectElement("aa"); <br /> } else { <br /> protectElement("aa"); <br /> } <br /> } <br /> <br /> </script>
是这个~~~
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script> <br /> function protectElement(element) { <br /> var element = document.getElementById(element); <br /> if (element.type == "text") { <br /> element.className = "readonly "; <br /> } <br /> } <br /> function unProtectElement(element) { <br /> var element = document.getElementById(element); <br /> if (element.type == "text") { <br /> element.className = "text"; <br /> } <br /> } <br /> function checkboxOnclick(){ <br /> if (document.getElementById("cc").checked == true) { <br /> unProtectElement("aa"); <br /> } else { <br /> protectElement("aa"); <br /> } <br /> } <br /> <br /> </script>
是这个~~~
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+11
font:12px/2 , 这个什么意思呢？ input 和 span 显示出来的字体也不同
我写了一个如下的样式
input[type=text]
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 1px 2px 0px 2px;
border-width: 1px;
border-color: red;
border-style: solid;
}
目的是给所有 input.text 加上这样默认的样式，但是很奇怪的是我用一个简单的HTML测试就会起作用，但是放在我的系统（IE7）里面就不起作用了，哪位大牛遇过这样的问题啊？
可不可以直接在你要加样式的input里加个class=""呢，有必要用遍历去折腾吗
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn