关于css控制input样式的问题，其实特简单，进来拿分吧~_html/css

关于css控制input样式的问题，其实特简单，进来拿分吧~_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 12:10:11

Original

1388 Leute haben es durchsucht

  <!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>

Nach dem Login kopieren

问题：
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>

Nach dem Login kopieren

一般设置的时候需要注意一下，特别是高度和行高保持一致，另外还需要注意就是设置内边距

高度和宽度还是会动啊

我改好了

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

csstest

 <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 = ""; } } function checkboxOnclick(){ if (document.getElementById("cc").checked == true) { unProtectElement("aa"); } else { protectElement("aa"); } } </script>

是这个~~~

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

csstest

 <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 = "text"; } } function checkboxOnclick(){ if (document.getElementById("cc").checked == true) { unProtectElement("aa"); } else { protectElement("aa"); } } </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=""呢，有必要用遍历去折腾吗