首页 >web前端 >html教程 >关于css控制input样式的问题,其实特简单,进来拿分吧~_html/css_WEB-ITnose

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

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


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



    


    
     20000 


 

是这个~~~

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


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



  

  
  
   20000 


  

是这个~~~

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