Home >Web Front-end >HTML Tutorial >Regarding the problem of css controlling input style, it is actually very simple. Come in and get points~_html/css_WEB-ITnose
Regarding the problem of css controlling input style, it is actually very simple. Come in and get points~_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:10:111398browse
<!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> 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> 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
我改好了
23fdfc7cf9717e7274ca952e92d33170
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
37c1a7dfb8c6d274a50247b1f0d3b8c9
b2386ffb911b14667cb8f0f91ea547a7 csstest 6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
*{ 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;}
531ac245ce3e4fe3d50054a55f265927
3f1c4e4b6b16bbbd69b2ee476dc4f83a
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");
}
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
ff9c23ada1bcecdd1a0fb5d5a0f18437
3e7cbbe570a8f6a7c1909406d1d50ffa076402276aae5dbec7f672f8f4e5cc81
569ee89c9d12ef818be9b3b625bb63e2
75dc0fbf23c1387c2ab0885aefeb877e
d2eec56b3e0cf4db4a6265af6a40298f 20000 54bdf357c58b8a65c66d7c19c8e4d114
f5a47148e367a6035fd7a2faa965022e
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
是这个~~~
84a4fd6c9b03db58337327c07f061dbc
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
37c1a7dfb8c6d274a50247b1f0d3b8c9
b2386ffb911b14667cb8f0f91ea547a7 csstest 6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
*{ 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;}
531ac245ce3e4fe3d50054a55f265927
3f1c4e4b6b16bbbd69b2ee476dc4f83a
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");
}
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
ff9c23ada1bcecdd1a0fb5d5a0f18437
3e7cbbe570a8f6a7c1909406d1d50ffa076402276aae5dbec7f672f8f4e5cc81
569ee89c9d12ef818be9b3b625bb63e2
75dc0fbf23c1387c2ab0885aefeb877e
d2eec56b3e0cf4db4a6265af6a40298f 20000 54bdf357c58b8a65c66d7c19c8e4d114
f5a47148e367a6035fd7a2faa965022e
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
是这个~~~
84a4fd6c9b03db58337327c07f061dbc
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
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=""呢，有必要用遍历去折腾吗