Regarding the problem of css controlling input style, it is actually very simple. Come in and get points~_html/css

Regarding the problem of css controlling input style, it is actually very simple. Come in and get points~_html/css_WEB-ITnose

WBOY

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

Original

1397 people have browsed it

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

Copy after login

Question:
1 When clicking the checkbox, the input only needs to change the background color, why do the height and length change?
2 Are “font-size” different standards for input and span? Why set the same size, one font is larger and the other is smaller?

Reply to discussion (solution)

The style is not written well.

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

Copy after login

You need to pay attention to the general settings, especially the height and line height should be consistent. You also need to pay attention to setting the padding

The height and width will still move. Ah

我改好了

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

     20000

是这个~~~

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

   20000

是这个~~~

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