在WEB开发过程中，信息录入界面中，经常会有一个特殊的输入元素，如：必填字段、日期选择字段、在弹出窗口中选值的字段，使用CSS来设置这些元素的外观，可以省去一些不必要的按钮、提示，使页面更加简洁。
效果如下：
实现这样的效果，只须一张图片：
CSS代码很简单：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<title>隔壁老王 - JavaEye技术网站</title>
</head>
<style type="text/css">
.input1,.input2,.input3{
padding:0;
height:15px;
line-height:15px;
border:1px solid #ABAFFB;
background:url(inputbk.gif) no-repeat right 0;
width:300px;
}
.input2{
background-position:right -15px;
}
.input3{
background-position:right -30px;
background-repeat:repeat-x;
}
</style>
<body>
<h2>灵活使用CSS，控制input元素的外观，<br/>可以省去一些不必要的按钮、提示。</h2>
<input class="input3" value="灵活使用CSS，必填字段"/></br></br>
<input class="input1" value="wallimn"/></br></br>
<input class="input2" value="http://wallimn.iteye.com"/>
</body>
</html>
/***********本人原创，欢迎转载，转载请保留本人信息*************/
作者：wallimn 电邮：wallimn@sohu.com 时间：2009-02-14
博客：http://blog.csdn.net/wallimn http://wallimn.iteye.com
网络硬盘：http://wallimn.ys168.com
/***********文章发表请与本人联系，作者保留所有权利*************/
- 大小: 229 Bytes
- 大小: 13.2 KB
分享到：
相关推荐
简单又令人惊艳的hover效果表单案例 HTML+CSS实现3D旋转卡片 HTML+CSS打造伸缩式导航栏 有点小酷的input输入框动画 HTML+CSS制作闪亮的玻璃图标悬浮效果 HTML+CSS制作富有弹性的导航栏标签 HTML+CSS制作弹性旋转菜单...
2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3...
在您的 Java 程序中，创建一个新的LessCSSCompiler实例，然后调用任何compile()方法将您的 LESS 输入转换为 CSS 输出，例如： LessCSSCompiler compiler = new LessCSSCompiler (); // String input/o
一个表单案例，我们使用 CSS 来渲染 HTML 的表单元素： CSS 实例 input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4...
但是在你创建 input 元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用 $(...
此选择器一般也要和其他选择器配合使用，比如类选择器、元素选择器等等。 代码如下:$(“input:disabled”).css(“background-color”,”red”); 以上代码能够将不可用的input元素的背景色设置为红色。 实例代码: ...
js实现Element中input组件的部分功能并封装成组件(实例代码) 现在实现的有基础用法、可清空、密码框，参考链接：https://element.eleme.cn/#/zh-CN/component/input HTML代码：想要测试哪个组件，直接将对应组件...
提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...
第一步：需要掌握css的缩写技巧参考下面的文章即可CSS缩写优化CSS文件的体积CSS常用属性缩写实例[推荐]第二步：用css在线格式化与压缩工具第三步：测试，看看经过压缩后的css文件，会不会导致页面变形等问题，一般...
此选择器一般也要和其他选择器配合使用，比如类选择器、元素选择器等等。例如: 代码如下:$(“input:enabled”).css(“background-color”,”red”) 以上代码能够将可用的input元素的背景颜色设置为红色。 实例代码:...
2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首...
之前为大家介绍了好几款导航菜单，今天要给大家带来一款纯css3实现的环形导航菜单。该导航比较新鲜，列表图标位于中间，单击列表图标的时候，各项分布于列表图表的四周。形成一个环形。效果图如下： 实现的代码。 ...
本文实例讲述了Jquery中CSS选择器用法。分享给大家供大家参考。具体如下： jQuery使用了一套css选择器，共有5种，即标签选择器，ID选择器，类选择器，通用选择器和群组选择器，现分述如下： 1. 标签选择器 用于选择...
本文实例讲述了javascript动态设置样式style的方法。分享给大家供大家参考。具体分析如下： 动态修改style 1.易错:修改元素的样式不是设置class属性，而是className属性. 2.易错:单独修改样式的属性使用”style.属性...
2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首...
本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法。分享给大家供大家参考。具体分析如下： 有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于...
源码下载这个实例完全由css3实现的没有任何js代码。下面我们一起看下实现代码吧 html代码： 复制代码代码如下: <div xss=removed> <label> <input type=”checkbox” class=”option-input checkbox” checked=...
这个实例完全由css3实现的没有任何js代码。下面我们一起看下实现代码吧 html代码： 复制代码代码如下:<div xss=removed> <label> <input type=”checkbox” class=”option-input checkbox” checked=””> ...
本文实例为大家分享了jQuery表单元素选择器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> ...