html中如何用css讓文本框有立體的感覺

style

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),騰沖企業(yè)網(wǎng)站建設(shè),騰沖品牌網(wǎng)站建設(shè),網(wǎng)站定制,騰沖網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,騰沖網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

type="text/css"

INPUT.smallInput

{

BACKGROUND-COLOR:#FFFFFF;

COLOR:#000000;

FONT-SIZE:9pt;

FONT-WEIGHT:Normal;

TEXT-DECORATION:None;

FOTN-FAMILY:宋體,verdana,Arial,

Helvetica;

TEXT-ALIGN:Left;

BORDER-TOP:3

Hidden

#808080;

BORDER-LEFT:3

Hidden

#808080;

BORDER-RIGHT:3

Hidden

#FFFFFF;

BORDER-BOTTOM:3

Hidden

#FFFFFF;

CURSOR:Text;

}

/style

這個css樣式是

--單行文本框設(shè)置代碼--，你可以修改一下做出自己想要的效果

，然后你的文本框調(diào)用這個樣式就可以了

html文本框圓角邊框css樣式怎么寫

html文本框圓角邊框css樣式可以通過改變border-radius屬性的值進行添加。border-radius值的單位可以使用“px”，也可以使用“%”，單位不同效果也不同。具體代碼如下：

!doctype html

html

head

meta charset="UTF-8"

titleDocument/title

/head

body

textarea style="border-radius: 50px; width: 100px; height: 100px;" /textarea

/body

/html

運行效果如圖：

擴展資料：

CSS具有以下特點：

1、豐富的樣式定義：

CSS提供了豐富的文檔樣式外觀，以及設(shè)置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。

2、易于使用和修改：

CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進行統(tǒng)一管理。

3、多頁面應(yīng)用：

CSS樣式表可以單獨存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實現(xiàn)多個頁面風(fēng)格的統(tǒng)一。

參考資料百度百科——css

文本框CSS樣式問題

如果你不想要白邊，就把

border:

solid

1px

#cacaca;去掉，ie和火狐的處理邊框是不一樣的，ie把邊框放到文本框的外面，火狐是放到文本框的里面

想百度的輸入框怎么做啊？我想知道輸入框應(yīng)該怎么美化就好看了，不是那種直接的文本框。急……

可以用css來改變文本框的樣式，比如下面這個文本框是沒有邊框的：

input type=text value="" style="border:0"

下面這個文本框的背景是用圖片的，這樣就可以做出任何你可以想象出的樣式了：

input type=text value="" style="border:0; background:url(back.jpg) no-repeat; width:100px; height:22px"

補充一下：百度所用的文本框樣式是：

input type=text value="" style="width:404px;height:22px;padding:4px 7px;padding:6px 7px 2px\9;font:16px arial;background:url() no-repeat -304px 0;_background-attachment:fixed;border:1px solid #cdcdcd;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top;margin:0 5px 0 0"

看起來雖然很復(fù)雜，但原理是一樣的。你把這段直接復(fù)制到自己的網(wǎng)頁，效果就跟百度一樣的了

幾種漂亮的文本框樣式

只有下劃線的文本框：

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"

軟件序列號式的輸入框(完整版)：

script for="T" event="onkeyup"if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();/script

script for="T" event="onfocus"select();/script

script for="Submit" event="onclick"

var sn=new Array();

for(i=0;iT.length;i++)

sn=T.value;

alert(sn.join("—"));

/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="T" size="5" maxlength="3"

input type="submit" name="Submit"

輸入框景背景透明：

input style="background:transparent;border:1px solid #ffffff"

鼠標(biāo)劃過輸入框，輸入框背景色變色：

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

網(wǎng)站題目：好看的文本框css樣式,好看的文本框css樣式
標(biāo)題來源：http://chinadenli.net/article49/dsspheh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)頁設(shè)計公司、企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)、App設(shè)計、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)