<input type='file' name='file1' id='file1' <br&">

网页制作技巧之用CSS定义表单元素中的样式

80酷酷网    80kuku.com

  css|技巧|网页先看下面代码:

<html>
<head>
</head>
<body>
<form name="form1">
<input type='file' name='file1' id='file1'
<input id='text1' solid black;height:22'>
<input type='button' value='file' 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>

  这才知道原来文件域也是可以用脚本定义的!只是火狐上不支持。

  于是我就写一点关于表单里的样式的定义,仔细的研究了一下如下:

  1.form

  首先form是有边界、补白的。请一定要记住,不然刚开始学习时你总是找不到在哪里出了问题。

  2.input

  定义按钮也就是INPUT时我们可以定义它的字体颜色,边框,背景色。只是这样定义时字好象总不是那么垂直居中!不过不影响效果。

  3.inputl图片美化

  当我们想美化一下按钮时,我们就要用到背景了,这时注意一定别忘了定义边框为无。然后就可以定义你喜欢的图片了。定义它的高、宽。※我们在写值时(value),一定要写汉字,然后定义样式text-indent:-9999px;这样才可以把字隐藏起来,如果是英文就会显示出来,此种情况是在IE中,在火狐中不存在这种情况,另一种情总如果你value不写值,在IE里按钮就定的很小了,火狐中没有这种现象。不防可以自己测试一下。

  4.文件域

  对于定义文件域的按钮时,我把这个域分成两部分,显示文字部分A,按钮B两部分,便于说清楚。我们定义也只能定义出A,B边框,还有A部分背景色,文字颜色。

  5.文本域

  这个按钮,我们可定义出宽度,但高度无效。如果想定义高一些也只能定义字体大一些了,比如定义字体大小为30px,那么它的高度就会相应增加了。

  以上讨论的是不用脚本的情总下。先写这么多吧。



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: