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

       csstest  /*[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;}   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");  }}	        

问题：
1 点checkbox时候, input 只需要变背景色的,为什么高度和长度会变？
2 “font-size” 对于input 和 span 是不是不同的标准？ 为什么设置同样的size，一个字体大一个字体小？

回复讨论(解决方案)

样式没写好。

              csstest               *{ 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;}                  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");            }        }           

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

高度和宽度还是会动啊

我改好了


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



csstest

*{ margin:0; padding:0;}
body{font:12px/2 arial;}
.default_input{ height:21px; line-height:21px;}
.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;}


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");
}
}

是这个~~~

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



csstest

*{ margin:0; padding:0;}
body{font:12px/2 arial;}
.default_input{ height:21px; line-height:21px;}
.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;}


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");
}
}

是这个~~~

"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=""呢，有必要用遍历去折腾吗

查看更多关于关于css控制input样式的问题，其实特简单，进来拿分吧~_html/css_WEB-ITnose的详细内容...