建站
咨詢
售后
建站咨詢
新聞中心
在網(wǎng)頁設(shè)計(jì)中，常常要使用 HTML 文本框來收集一些用戶信息或是制作登錄頁，雖然只是簡單的輸入框，但是如果加入一些美化設(shè)計(jì)會(huì)使你的頁面看起來更加有吸引力，下面就給大家提供了一些 html 文本框的參考樣式和常見的 html 操作技巧，希望對(duì)你的網(wǎng)頁制作有幫助。首先我們先看看一個(gè)最簡單的文本框是如何實(shí)現(xiàn)的？
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),樂東黎族網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:樂東黎族等地區(qū)。樂東黎族做網(wǎng)站價(jià)格咨詢:18982081108
--------------------------------------------------------------
W3Cschool文本輸入框?qū)嵗?
--------------------------------------------------------------
如上實(shí)例所示，其實(shí)這個(gè) html 文本框樣式非常簡單，用到了 css 的偽元素 focus。下面我們一起來重新做一個(gè)吧。首先我們需要在你的頁面上添加一個(gè)文本框代碼如下:
實(shí)例
W3Cschool文本輸入框?qū)嵗?input type="text" value="請(qǐng)輸入文本" >
嘗試一下 ?
這個(gè)是我們最常見到的按鈕了，它沒有任何的樣式。現(xiàn)在我們來添加一些好看的樣式，代碼如下：
實(shí)例
.mytxt {
color:#333;
line-height:normal;
font-family:"Microsoft YaHei",Tahoma,Verdana,SimSun;
font-style:normal;
font-variant:normal;
font-size-adjust:none;
font-stretch:normal;
font-weight:normal;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:4px;
padding-right:4px;
padding-bottom:4px;
padding-left:4px;
font-size:15px;
outline-width:medium;
outline-style:none;
outline-color:invert;
border-top-left-radius:3px;
border-top-right-radius:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
text-shadow:0px 1px 2px #fff;
background-attachment:scroll;
background-repeat:repeat-x;
background-position-x:left;
background-position-y:top;
background-size:auto;
background-origin:padding-box;
background-clip:border-box;
background-color:rgb(255,255,255);
margin-right:8px;
border-top-color:#ccc;
border-right-color:#ccc;
border-bottom-color:#ccc;
border-left-color:#ccc;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
}
當(dāng)我們添加了樣式以后，我們需要在文本框中引用此樣式。修改文本框代碼如下：
實(shí)例
嘗試一下 ?
好了我們基本的文本框樣式完成了，現(xiàn)在我們需要再次添加 focus 按鈕。首先簡單的介紹一下 focus 按鈕的作用：就是當(dāng)我們箭頭在文本框中的時(shí)候觸發(fā)此樣式。
添加 css 樣式如下：
實(shí)例
.mytxt:focus {
border: 1px solid #fafafa;
-webkit-box-shadow: 0px 0px 6px #007eff;
-moz-box-shadow: 0px 0px 5px #007eff;
box-shadow: 0px 0px 5px #007eff;
}
嘗試一下 ?
因?yàn)槲覀兪髽?biāo)移進(jìn)去的時(shí)候，需要修改邊框的顏色和一些陰影，所以上面的代碼就夠了！希望你能從上面的例子中得到啟發(fā)。
現(xiàn)在，我們一起來看看幾個(gè)好用的 html 表單文本框是如何實(shí)現(xiàn)的。表單的文本框分為單行文本框和多行文本框，故名思義，單行文本框用于輸入一些簡短的信息，如：姓名、E_mail地址、口令等等；多行文本框用于輸入內(nèi)容較長的信息，如：用戶意見、評(píng)論、留言等。只要你理解了表單的文本框參數(shù)的含義，制作接收信息的文本框是不難的，請(qǐng)看下面的例子。
一、一個(gè)單行文本框的例子
本例的源代碼如下：
實(shí)例
您的姓名：
您的E_mail：
輸入口令：
嘗試一下 ?
本例中用了三個(gè)單行文本框來分別接收用戶的“姓名”、“E_mail地址”和“口令”信息，在三個(gè)文本框中都設(shè)定文本框的寬度（size）和最大輸入文本長度（maxlength），在第二個(gè)文本框中還設(shè)定了初始值（value），你可能注意到了，我把每個(gè)文本框的名稱（name）都取成了英文名，這樣對(duì)用于程序外理比較方便，因下例中要用這個(gè)例子。若是用電子郵件接收表單信息并不用程序處理，那么用中文名比較直觀。
為了使其成為一個(gè)具有實(shí)際交互功能的表單，加上了一個(gè)提交按鈕，并在
嘗試一下 ?
html文本框參考樣式
輸入框景背景透明：
實(shí)例
嘗試一下 ?
鼠標(biāo)劃過輸入框，輸入框背景色變色：
實(shí)例
style="width: 106; height: 21" onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black"> 嘗試一下 ? 輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樾》叫?： 嘗試一下 ? 嘗試一下 ? 自動(dòng)橫向廷伸的輸入框： 嘗試一下 ? 自動(dòng)向下廷伸的文本框： 嘗試一下 ? 只有下劃線的文本框： 嘗試一下 ? 軟件序列號(hào)式的輸入框： 嘗試一下 ? 軟件序列號(hào)式的輸入框(完整版)： 嘗試一下 ? 1、html 文本框怎么用 css 變圓角 border-radius 屬性可以實(shí)現(xiàn)元素的圓角。如下 css 可以實(shí)現(xiàn)文本框（單行、多行）的圓角： border-radius 用法如下： border-radius: 1-4 length|% / 1-4 length|%; 按此順序設(shè)置每個(gè) radius 的四個(gè)值。 2、HTML中如何設(shè)置文本框的大小 邊框的大小，可以使用CSS樣式控制，如： 也可以使用文本框自己的屬性，定義文本框的行和列控制大小，如： 3、在html中如何實(shí)現(xiàn)將本網(wǎng)頁中文本框中的值傳遞到另一個(gè)網(wǎng)頁的用戶名密碼框中，并實(shí)現(xiàn)登陸 在html網(wǎng)頁中，一個(gè)按鈕，兩個(gè)文本框，在
實(shí)例
輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樘摼€)： 實(shí)例
實(shí)例
實(shí)例
實(shí)例
實(shí)例
實(shí)例
html文本框常見操作技巧
input[type=text],textarea{border-radius:3px;border:1px solid #000;}
border-radius 屬性是一個(gè)簡寫屬性，用于設(shè)置四個(gè) border-*-radius 屬性。
該屬性允許為元素添加圓角邊框
語法：
如果省略 bottom-left，則與 top-right 相同。
如果省略 bottom-right，則與 top-left 相同。
如果省略 top-right，則與 top-left 相同。
單位一般用px和百分比較多，其他單位也可