在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
分享到：
相关推荐
在网页设计中，CSS（层叠样式表）是一种强大的工具，用于控制网页元素的样式、布局和呈现方式。本文将详细讲解如何使用CSS实现表单元素的透明效果，以达到吸引用户注意力、提升网页视觉效果的目的。 首先，理解透明...
在网页设计中，为了实现美观的效果，经常需要用到CSS3中的圆角边框（border-radius）属性，让元素的四个角落呈现出圆形或椭圆形的外观。然而，早期版本的Internet Explorer浏览器，尤其是IE8及以下版本，并不支持这...
11. **透明度与混合模式**：使用`opacity`控制元素透明度，`mix-blend-mode`实现元素间的混合效果。 12. **CSS预处理器**：如Sass、Less等，它们提供了变量、嵌套规则、函数等特性，提高代码组织和可维护性。 通过...
CSS实例教程表单提升-制作漂亮的网页表单 CSS实例教程表单提升-制作漂亮的网页表单是网页制作中非常重要的一件事情。高手可以飘过啦，css 表单是网页制作中非常重要的元素， 比如注册表单， 登陆表单， 等等很多...
在本篇内容中，我们将详细探讨如何使用jQuery来获取form表单中input元素的值，包括文本框、复选框、单选按钮等不同类型input元素的值获取方法。通过jQuery提供的val()方法和attr()方法，我们可以轻松获取或设置input...
1. **选择器增强**：CSS3增加了更多的选择器，如属性选择器、伪类选择器（`:hover`、`:active`、`:focus`）和伪元素选择器（`::before`、`::after`），使样式控制更精确。 2. **边框和背景**：CSS3引入了圆角边框...
HTML5是超文本标记语言的最新版本，它极大地扩展了网页内容的表示能力，而CSS3则是层叠样式表的第三次重大修订，为网页设计提供了前所未有的控制力和灵活性。以下是这两个关键知识点的详细解释： 1. **HTML5**: ...
然后，CSS（Cascading Style Sheets）用于控制网页的样式和布局。在登录模板中，我们关注以下几点： 1. 布局：使用CSS的`display`属性创建响应式布局，如`flexbox`或`grid`。这有助于使登录表单在不同设备上保持...
每个实例都可能包含对HTML5新元素的使用，以及CSS3新特性的实战展示，这不仅有助于初学者快速掌握这两种技术，也是经验丰富的开发者寻找灵感和解决方案的好资源。通过分析和实践这些实例，你可以深入了解如何在实际...
1. **定位与对齐**：`CSS`允许我们使用`position`属性（如`static`、`relative`、`absolute`、`fixed`）来控制元素的位置。对于登录界面，可能需要将表单居中对齐或者固定在屏幕某个角落。 2. **布局模式**：使用`...
这个“简单的css3输入框提示文字效果”是一个实例，它展示了如何利用CSS3来优雅地处理表单输入框的提示文本，提高用户界面的交互性和美观度。以下将详细介绍这一技术及其相关的知识点。 首先，我们需要理解HTML中的...
在网页设计中，radio（单选按钮）和...通过以上方法，我们可以使用纯CSS实现对radio和checkbox的美化，让网页的交互元素更加吸引人。在实际项目中，你可以根据提供的参考实例进行修改，以适应不同的主题和应用场景。
简单又令人惊艳的hover效果表单案例 HTML+CSS实现3D旋转卡片 HTML+CSS打造伸缩式导航栏 有点小酷的input输入框动画 HTML+CSS制作闪亮的玻璃图标悬浮效果 HTML+CSS制作富有弹性的导航栏标签 HTML+CSS制作弹性旋转菜单...
7. `<label>`：与`<input>`配合使用，提供输入字段的描述或标签。 8. `<button>`：创建可点击的按钮，通常用于提交表单。 CSS则是用于美化这些HTML元素的工具，它允许开发者控制网页的布局、颜色、字体等视觉效果。...
而CSS3则是层叠样式表的最新规范，提供了更多的样式控制和动画效果，让网页设计更加灵活和精美。 首先，HTML5的新特性包括： 1. **语义化标签**：如`<header>`、`<nav>`、`<section>`、`<article>`和`<footer>`等...
这意味着几乎所有的页面元素都可以使用CSS滤镜来增强视觉效果。 **3. 动态控制** 通过JavaScript，可以动态地改变CSS滤镜的效果，这意味着可以在用户交互时即时更新页面元素的视觉效果，例如响应用户的鼠标悬停...
4. 表单控件升级：新增了<input type="date">、<input type="range">等输入类型，以及元素的required属性，增强了表单验证功能。 5. 存储机制：引入了localStorage和sessionStorage，允许在浏览器中存储大量数据，...
4. **简单易用**：使用checkboxes.css非常直观，只需在HTML中为`<input type="checkbox">`元素添加特定的class，如`checkbox--flat`、`checkbox--rounded`等，即可看到效果。 5. **良好的浏览器支持**：由于基于CSS...