网页制作技巧之用CSS定义表单元素中的样式
2008-02-23 08:41:17来源：互联网 阅读 ()
先看下面代码：
<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" onclick='alert(document.form1.file1.value)'>
</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,那么它的高度就会相应增加了。
以上讨论的是不用脚本的情总下。先写这么多吧。
关键词：
【推荐给好友】【关闭】最新五条评论
查看全部评论
评论总数 0 条您的评论
·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
