網頁製作技巧之用CSS定義表單元素中的樣式

來源:互聯網
上載者:User
css|技巧|網頁 先看下面代碼:

<html>
<head>
</head>
<body>
<form name="form1">
<input type='file' name='file1' id='file1' style='display:none'>
<input id='text1' style='border:1 solid black;height:22'>
<input type='button' value='file' style='border:1 solid orange;background-color:eeeeee;height:22'
onclick='document.all.file1.click(); document.all("text1").value=document.all("file1").value;'>
<input type="button" value="111" onclick='document.getElementById("file1").click()'>
<input type="button" value="111" >
</form>
</body>
</html>

  這才知道原來檔案域也是可以用指令碼定義的!只是Firefox上不支援。

  於是我就寫一點關於表單裡的樣式的定義,仔細的研究了一下如下:

  1.form

  首先form是有邊界、補白的。請一定要記住,不然剛開始學習時你總是找不到在哪裡出了問題。

  2.input

  定義按鈕也就是INPUT時我們可以定義它的字型顏色,邊框,背景色。只是這樣定義時字好象總不是那麼垂直置中!不過不影響效果。

  3.inputl圖片美化

  當我們想美化一下按鈕時,我們就要用到背景了,這時注意一定別忘了定義邊框為無。然後就可以定義你喜歡的圖片了。定義它的高、寬。※我們在寫值時(value),一定要寫漢字,然後定義樣式text-indent:-9999px;這樣才可以把字隱藏起來,如果是英文就會顯示出來,此種情況是在IE中,在Firefox中不存在這種情況,另一種情總如果你value不寫值,在IE裡按鈕就定的很小了,Firefox中沒有這種現象。不防可以自己測試一下。

  4.檔案域

  對於定義檔案域的按鈕時,我把這個域分成兩部分,顯示文字部分A,按鈕B兩部分,便於說清楚。我們定義也只能定義出A,B邊框,還有A部分背景色,文字顏色。

  5.文本域

  這個按鈕,我們可定義出寬度,但高度無效。如果想定義高一些也只能定義字型大一些了,比如定義字型大小為30px,那麼它的高度就會相應增加了。

  以上討論的是不用指令碼的情總下。先寫這麼多吧。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。