1. 程式人生 > >HTML文字框樣式大全!(很實用,轉載!)

HTML文字框樣式大全!(很實用,轉載!)

輸入框景背景透明:
<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_r(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_r(this.width=this.scrollWidth)" value="abcdefghijk">
 
自動向下廷伸的文字框:
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) 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">
 
軟體序列號式的輸入框(完整版):
<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;i<T.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">

相關推薦

HTML文字樣式大全實用轉載

輸入框景背景透明: <input style="background:transparent;border:1px solid #ffffff"> 滑鼠劃過輸入框,輸入框背景色變色: <INPUT value="Type here" NAME="use

關於深度學習中的注意力機制這篇文章從例項到原理都幫你參透了系統重點看

最近兩年,注意力模型(Attention Model)被廣泛使用在自然語言處理、影象識別及語音識別等各種不同型別的深度學習任務中,是深度學習技術中最值得關注與深入瞭解的核心技術之一。 本文以機器翻譯為例,深入淺出地介紹了深度學習中注意力機制的原理及關鍵計算機制,同時也抽

用10分鐘搭建影象處理程式設計環境0失敗python語言windows系統

以前,你可能看過很多的文章,開始搭建一個影象處理的程式設計環境。 結果,按照教程一步一步做的時候,總是出現各種各樣的問題。 就算成功了,後續開發過程中要用到不同版本的opencv,不同版本python,更換特別麻煩。 今天,我以我多年的經驗,給你一個安裝教程。 零

c# winform 關於DataGridView的一些操作絕對夠用

設定欄位名  設定欄位值  設定單元格表示 Error圖示  設定當前單元格  取得當前單元格內容  取得當前單元格的列 Index  取得當前單元格的行 Index  向下一行 

C語言高效編程的幾招絕對實用絕對經典

n) 工程 fine bit 高效 nbsp 與運算 測試的 body 編寫高效簡潔的C語言代碼,是許多軟件工程師追求的目標。廢話不說,走起! 第一招:以空間換時間 計算機程序中最大的矛盾是空間和時間的矛盾,那麽,從這個角度出發逆向思維來考慮程序的效率問題 eg.字

js 呼叫後臺程式碼比較實用好記

JavaScript呼叫ASP.NET後臺程式碼:  方法一: 1、首先建立一個按鈕,在後臺將呼叫或處理的內容寫入button_click中;           2、在前臺寫一個js函式,內容為document.getElementById("btn1").click()

Jquery全面控制文字技巧大全獲取值和賦值、清空等

$("#Text1").val("公交"); //賦值 $("#Text1").val(""); //清空 var mbt = $("#Text1").val(); // 獲取值 $(”#Tex

html 文字去掉邊框

去掉:<input   type="text"   name="textfield"   style="border:0px;"> 只留下邊框:<input type="text" style="BORDER-T

深入淺出maven系列---maven構建ssh工程父工程與子模組的拆分與耦合 前一節我們初識了maven並且掌握了maven的常規使用這一節就來講講它的一個重要的場景也就是通過maven將一個ssh專案分隔為不同的幾個部門獨立開發,很重要加油!!!

        前一節我們初識了maven並且掌握了maven的常規使用,這一節就來講講它的一個重要的場景,也就是通過maven將一個ssh專案分隔為不同的幾個部門獨立開發,很重要,加油!!! 一、maven父工

html文字超出部分顯示省略號偶爾失效

之前每次寫文字超出顯示省略號的樣式都是在網上百度的  這次也是  但效果沒有達到預期的那樣(就是失敗了。。。。) 這是我百度到的程式碼 <title>文字超過兩行或三行就顯示省略號<

paip HTML文字INPUT無法輸入的解決

                paip.HTML文字框INPUT無法輸入的解決檢視,READONLY和DIAABLE屬性都是OK的..在IE下是可以正常輸入的的..但是在TT,等基於IE的瀏覽器下也無法輸入..在FF,CHROME下輸入也無效..使用各種HTML.CSS除錯工具 無果..只好採用二分查詢法.

在Vue專案使用quill-editor帶樣式編輯器更改插入圖片和視訊 運用vue-quilt-editor編寫富文字編輯器 自定義圖片路徑 獲取後臺返回路徑

一、首先在main.js  引入 vue-quilt-editorimport VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.s

VC 設定靜態文字的背景色

填充靜態文字框的顏色: 1、在對話方塊中新增一個靜態文字框,設定其id為IDC_STATIC 2、獲得靜態文字框的控制代碼 HWND h_static = GetDlgItem(IDC_STATIC)->m_hWnd; 3、獲得靜態文字框的DC控制代碼 HDC hdc = ::GetDC(h_sta

C# 文字限制大全

雙擊事件中的KeyPress事件 1.只能輸入數字和字母,退格鍵: //文字框限制只能輸入數字和字母,退格鍵: private void textBox_KeyPress(object sender, KeyPressEventArgs e) {

iOS開發UITextField常用屬性歸納:文字樣式文字樣式、鍵盤樣式、左右檢視樣式、清除按鈕設定等

轉載自:http://blog.csdn.net/weisubao/article/details/39609579 (1)可以根據需要設定文字框的樣式(包括形狀、邊框顏色、背景等)。 (2)可以根據需要設定文字顯示樣式(包括輸入密碼時的密文顯示、文字橫向居中、縱向

設定input type為text的文字樣式

CSS 設定 input type="text" 標籤的樣式,而不會影響到 type="checkbox" 或其它input 第一種解決辦法:使用 JS 迴圈控制每個 type="text" 的文字框 <head runat="server"> <

設定文字樣式和修改按鈕樣式

設定文字框樣式 沒有圖片情況下增加白色背景: 1、在res--drawable下新建white_bg.xml檔案,並選擇shape標籤子標籤:①<corners/>:設定圓角。android:radius="5dp":圓角半徑為5dp。②<gradient

GUI實踐 swing元件-----JSplitPane拆分窗格、JTextArea多行文字元件、JTabbedPane選項卡視窗

JSplitPane(拆分窗格)/** * 功能:拆分窗格JSplitPane */ package com.gui; import javax.swing.ImageIcon; import javax.swing.JFrame; import javax.swi

html 文字的一些屬性

<input type="text" value="1000" style="color:Grey" size="50"></p> value--文字框預設文字 style=“color:Grey”--字型顏色為灰色 size="50" 文字框長度

Jquery限制文字只能輸入數字小數點也可以

   $(function() {             $("input[type='text']").bind('keydown', function(event) {                 var keyCode = event.which;