建站
咨詢
售后
建站咨詢
新聞中心
如何用css改變input顯示的樣式
使用css樣式直接可以改變input的樣式的，input屬于行內(nèi)替換元素height/width/padding/margin均可用，效果等于塊元素。
創(chuàng)新互聯(lián)專注于合山企業(yè)網(wǎng)站建設,自適應網(wǎng)站建設,成都做商城網(wǎng)站。合山網(wǎng)站建設公司,為合山等地區(qū)提供建站服務。全流程定制網(wǎng)站建設，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務
工具原料：編輯器、瀏覽器
1、設置一個寬度是寬度500px，高度50px，邊框是紅色的input輸入框的代碼如下：
body
input type="text" /
style
input{
width: 500px;
height: 50px;
border: 1px solid red;
}
/style
/body
2、運行的效果如下圖：
如何用css改變輸入框樣式
中文字符的中線和英文字符的中線定義是不一樣的，你在設置輸入框與文本居中對齊的時候，最好將文本的字體樣式設置成英文字體，比如font-family:verdana;這樣有助于解決中線問題。然后再給輸入框添加 vertical-align:middle;樣式。
注意，由于涉及到中線問題，所以字號會影響對齊的效果。例子就不舉了，你可以改變字號（12px、13px等）自己嘗試一下。
用css怎么寫輸入框
用CSS怎么能寫輸入框呢，CSS只是用來寫樣式的。要寫輸入框就用HTML的input標簽。例如：
input type="text" name="username" /
input type="password" name="password"
css 特殊input樣式
css?特殊input樣式，參考如下：
輸入框景背景透明：
input?style="background:transparent;border:1px?solid?#ffffff"
鼠標劃過輸入框，輸入框背景色變色：
INPUT?value="Type?here"?NAME="user_pass"?TYPE="text"?SIZE="29"?onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width:?106;?height:?21"?
onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'"?style="border-width:1px;border-color=black"
輸入字時輸入框邊框閃爍(邊框為小方型)：
Script?Language="javascript"
function?borderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor?=?'yellow';
}else{
self['oText'].style.borderColor?=?'red';
}
oTime?=?setTimeout('borderColor()',400);
}
/Script
input?type="text"?id="oText"?style="border:5px?dotted?red;color:red"?onfocus="borderColor(this);"?onblur="clearTimeout(oTime);"
輸入字時輸入框邊框閃爍(邊框為虛線)：
style
#oText{border:1px?dotted?#ff0000;ryo:expression(onfocus=function?light?(){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
/style
input?type="text"?id="oText"
自動橫向廷伸的輸入框：
input?type="text"?style="huerreson:expression(this.width=this.scrollWidth)"?value="abcdefghijk"
自動向下廷伸的文本框：
textarea?name="content"?rows="6"?cols="80"?onpropertychange="if(this.scrollHeight80)?this.style.posHeight=this.scrollHeight+5"輸入幾個回車試試/textarea
只有下劃線的文本框：
input?style="border:0;border-bottom:1?solid?black;background:;"
軟件序列號式的輸入框：
script?for="T"?event="onkeyup"
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
/script
input?name="T"?size="5"?maxlength="3"—input?name="T"?size="5"?maxlength="3"—input?name="T"?size="5"?maxlength="3"—input?name="T"?size="5"?maxlength="3"—input?name="T"?size="5"?maxlength="3"—input?name="T7"?size="5"?maxlength="3"
如何用CSS美化輸入框的方法
為了達到更好的交互效果，提高用戶友好度，對文本框輸入框之類的美化工作是很必要的。 一般的美化工作可以直接通過使用CSS完成，方法也十分簡單，如下： 1、首先制作一張輸入框的背景圖，如上圖所示。 2、添加按鈕的Html代碼： input type=button class=Selectbg 3、然后用css代碼將它定義：stylebody{font-size:12px; } .Selectbg{border:none; width:150px; height:20px; background-image:url(image.gif); text-align:left;line-height:20px; }/style 在寫CSS代碼的時候要注意，如果背景圖中帶邊框，一定要將輸入框的邊框去掉，否則會顯示默認邊框；其次還要將高度和行高定義好，否則點擊輸入框后文字的位置會很難看。
本文題目：輸入框css樣式,css對話框樣式
轉(zhuǎn)載注明：http://fisionsoft.com.cn/article/dsssggo.html
