ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS による入力スタイルの制御の問題については、実際には非常に簡単です。ポイントを取得してください~_html/css_WEB-ITnose
CSS による入力スタイルの制御の問題については、実際には非常に簡単です。ポイントを取得してください~_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:10:111383ブラウズ
<!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 「フォントサイズ」は入力とスパンで規格が異なりますか？なぜ同じサイズを設定し、一方のフォントを大きくし、もう一方のフォントを小さくするのでしょうか?
ディスカッションへの返信（解決策）
文体がうまく書かれていません。
すごいです
一般的な設定、特に高さと行の高さに注意する必要があります
高さと幅も移動します
我改好了
9bec3657922e7842a7d2c930925ecc85
91c153871bcc4526e86c0b5dc435d9ac csstest 6e916e0f7d1e588d4f442bf645aedb2f
*{ マージン: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;}
531ac245ce3e4fe3d50054a55f265927
4e07eaec52b67b6abe4024604b22f1f1
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");
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
c68f7cc1cf38464f1ee603e9f4c6d896076402276aae5dbec7f672f8f4e5cc81
a8e05059268f9e0f1f3b9a740f88fb03
10c242f5c196166fb43e480010b17f4a
bc3e18fd4b141e5e2d77596c055ca154 20000 54bdf357c58b8a65c66d7c19c8e4d114
f5a47148e367a6035fd7a2faa965022e
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
是这个~~~
9bec3657922e7842a7d2c930925ecc85
f46867ed1a6867a7ab72f06157d8c4c3
csstest 6e916e0f7d1e588d4f442bf645aedb2f
*{ マージン: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;}
531ac245ce3e4fe3d50054a55f265927
4e07eaec52b67b6abe4024604b22f1f1
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");
}
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
c68f7cc1cf38464f1ee603e9f4c6d896076402276aae5dbec7f672f8f4e5cc81
a8e05059268f9e0f1f3b9a740f88fb03
10c242f5c196166fb43e480010b17f4a
bc3e18fd4b141e5e2d77596c055ca154 20000 54bdf357c58b8a65c66d7c19c8e4d114
f5a47148e367a6035fd7a2faa965022e
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
はこれです~~~
8968327cf42cce053262dd252c904d4f
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）里面就不起作用了，哪位大牛遇过蠷的问题啊？去折腾吗