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

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>

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

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

  1.form

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

  2.input

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

  3.inputl图片美化

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

  4.文件域

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

  5.文本域

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

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

时间: 2024-08-22 15:24:06

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

网页制作技巧之用CSS缩写给你的网站加速

css|技巧|网页|网站加速 Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里.影响速度的因素有很多种,包括Web服务器的速度.访问者的Internet连接情况,以及浏览器必须下载的文件大小.尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小.为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量.由于CSS样式表是纯文本文件,和图像相比相对较

几种设置表单元素中文本输入框不可编辑的方法总结_javascript技巧

代码: 复制代码 代码如下: <input type="text" value="fisker" onclick="alert(this.value);" onfocus="this.blur()" /> 输入框无法获得焦点,不能编辑 表单可以获得值. 可以复制. 蛮奇怪的,都选住了,还没有获得焦点? 2,readonly 代码: <input type="text" value=&quo

网页制作技巧:关于CSS样式命名问题

css|技巧|网页|问题 商 标: label标 题: title主导航: mainbav(globalnav)顶导航: topnav边导航: sidebar左导航: leftsidebar右导航: rightsidebar旗 志: logo标 语: banner菜单内容1: menu1 content菜单容量: menu container子菜单: submenu边导航图标:sidebarIcon注释: note面包屑: breadcrumb(即页面所处位置导航提示)容器: container

表单元素事件 (Form Element Events)_javascript技巧

属性 值 描述 onchange 脚本 当元素改变时执行脚本 onsubmit 脚本 当表单被提交时执行脚本 onreset 脚本 当表单被重置时执行脚本 onselect 脚本 当元素被选取时执行脚本 onblur 脚本 当元素失去焦点时执行脚本 onfocus 脚本 当元素获得焦点时执行脚本 w3c的标准是这么描述的. 可是发现IE可以执行(不过如果你在遨游下测试onfocus的话千万别用alert(),会无限弹出.),其他浏览器都不可以实现.IE向来是个不听话的主,都是搞私有主义的....

表单元素属性readonly和disabled使用对比

表单元素属性readonly和disabled在适应范围.操作.表单提交等等方面都有所不同,至于有哪些不同,感兴趣的朋友可以了解下本文   1)适应范围: readonly:input[type="text"],input[type="password"],input[type="teaxtarea"] disabled:所有的表单元素,如select, radio, checkbox, button等 2)操作: readonly:不允许用户修

jQuery复制表单元素附源码分享效果演示_jquery

我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 查看演示 下载源码 HTML 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能. 首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script sr

表单元素的submit()方法和onsubmit事件应用概述_基础知识

表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交.可以使用elemForm.submit();方法触发表单提交.1.表单元素中出现了name="submit"的元素这种情况下elemForm.submit();将不会触发表单提交,因为表单原始的submit方法将会被覆盖(formElem.submit就是对该元素的引用).2.elemForm.submit();不会触发表单的onsubmit事件没有为什么,标准中就是这么规定的.与此有些类似的是onfo

基于jQuery复制表单元素的例子

我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表 单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能.首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script src="jquery.

CSS网页制作技巧:IE浏览器下li的默认高度问题

文章简介:CSS网页制作技巧:IE浏览器下li的默认高度问题. 昨天,在家打开IE7浏览器看"视频导航网"的时候,发现居然有排版错误. 用F12开发者工具看了下,发现 li 的默认高度既然不统一? 用工具看了下,发现火狐高度解析统一为33px,而IE7解析高度根据字的不一样,默认解析的高度为30px,纯数字的解析高度为31px;中英文组合的解析高度为32px; 解决方法一:给LI设置高度后,IE7正常了,但IE6问题依然存在.原来,LI里面还嵌套着A标签,给A也设置一个高度后问题解决.