CSS による入力スタイルの制御の問題については、実際には非常に簡単です。ポイントを取得してください~_html/css

CSS による入力スタイルの制御の問題については、実際には非常に簡単です。ポイントを取得してください~_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-06-24 12:10:11

オリジナル

1415 人が閲覧しました

  <!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 チェックボックスをクリックすると、入力は背景色を変更するだけで済みますが、高さと長さが変化するのはなぜですか?
2 「フォントサイズ」は入力とスパンで規格が異なりますか？なぜ同じサイズを設定し、一方のフォントを大きくし、もう一方のフォントを小さくするのでしょうか?

ディスカッションへの返信（解決策）

文体がうまく書かれていません。
すごいです

一般的な設定、特に高さと行の高さに注意する必要があります

高さと幅も移動します

我改好了

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

<タイトル> csstest

*{ マージン:0; パディング: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(要素) {
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");

20000

是这个~~~

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

csstest

*{ マージン:0; パディング: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(要素) {
var element = document.getElementById(element);
if (element.type == "text") {
element.className = "readonly ";
}
}
function unProtectElement(element) {
var element = document.getElementById(element);
if (element.type == "テキスト") {
element.className = "テキスト";
}
}
function checkboxOnclick(){
if (document.getElementById("cc").checked == true) {
unProtectElement("aa");
} else {
protectElement("aa");
}
}

20000

はこれです~~~

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

font:12px/2 , 这个什么指示呢？ input 和 span 显表示可能な文字体も異なります

我写了一如下的样式

input[type=text]
{ font-family: Arial, Helvetica, sans-serif;

padding: 1px 2px 0px 2px;

border-width: 1ピクセル;
border-color: red;
border-style: solid;
目的はすべての input.text 加上蠷默的样式，但是很奇怪的是我用一简单的HTML测试就作用放在我的系统（IE7）里面就不起作用了，哪位大牛遇过蠷的问题啊？去折腾吗