CSS3制作表单动态帮助信息

前几天在W3cplus Demo站上放了一个CSS3 Sliding Form Helps效果。

今天我们就一起来看看他是如何实现的。

实现方法

在表单制作中,往往都在一个input后面或者右边有一个提示框效果,特别是表单验证的制作上。有错误的,警告的,正确的等多种帮助信息。以前大多数看到的有提示信息一直显示,第二种,当表单验正完后显示提示信息,第三种就是input得到焦点时提示用户如何操作。而这些效果以前都是依附在jQuery的上面实现,今天我想和大家一起探讨的是使用CSS3来实现。

实现原理也是来源于jQuery,在这个案例中,当表单载入时,所有提示信息都处理隐藏状态,一但input得到焦点,相对应的提示信息就会显示出来。

HTML Markup

	<form action="#" method="post" class="form-horizontal">
  <fieldset>
    <div class="control-group">
      <label for="email" class="control-label">E-Mail:</label>
      <div class="controls controls-inline">
        <input type="email" id="email" />
        <span class="help-inline">Please Input Your Email!</span>
      </div>
    </div>
    <div class="control-group">
      <label for="password" class="control-label">Password:</label>
      <div class="controls controls-inline">
        <input type="password" id="password" />
        <span class="help-inline">Please Input Your Password!</span>
      </div>
    </div>			 
  </fieldset>
  <fieldset>
    <div class="control-group">
      <label for="email2" class="control-label">E-Mail:</label>
      <div class="controls controls-block">
        <input type="email" id="email2" />
        <span class="help-block">Please Input Your Email!</span>
      </div>
    </div>
    <div class="control-group">
      <label for="password2" class="control-label">Password:</label>
      <div class="controls controls-block">
        <input type="password" id="password2" >>
        <span class="help-block">Please Input Your Password!</span>
      </div>
    </div>			 
  </fieldset>
</form>		
	

这个结构很简单,渲染出来后就是左边label右边文本框的效果。在这里采用了Bootstrap的form结构和样式风格。详细的运用大家可以点击这里。我想在这里特别提出的是“帮助信息”的结构:

行内显示

		<div class="controls controls-inline">
      <input type="password" id="password" />
      <span class="help-inline">Please Input Your Password!</span>
    </div>
	

表单的帮助信息和input将在同一行显示,在Bootstrap form基础上进行了扩展,给div.controls容器添加一个新类名“controls-inline”。

块状显示

		<div class="controls controls-block">
      <input type="password" id="password2" >>
      <span class="help-block">Please Input Your Password!</span>
    </div>
	

同样的道理,只不过更换了一个类名“controls-block”。

CSS Code

		form {
			margin: 20px 0 18px;
		}
		fieldset {
			padding: 0;
			margin: 0;
			border: 0;
		}
		label,
		input,
		button{
			font-size: 13px;
			font-weight: normal;
			line-height: 18px;
		}
		input,
		button{
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
		label {
			display: block;
			margin-bottom: 5px;
			color: #333333;
		}
		input{
			display: inline-block;
			width: 210px;
			height: 18px;
			padding: 4px;
			margin-bottom: 9px;
			font-size: 13px;
			line-height: 18px;
			color: #555555;
			border: 1px solid #cccccc;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
		}
		input[type="button"],
		input[type="reset"],
		input[type="submit"] {
			width: auto;
			height: auto;
		}
		input {
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
			-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
			-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
			-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
			-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
			-o-transition: border linear 0.2s, box-shadow linear 0.2s;
			transition: border linear 0.2s, box-shadow linear 0.2s;
		}
		input:focus,
		textarea:focus {
			border-color: rgba(82, 168, 236, 0.8);
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
			-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
			outline: 0;
			outline: thin dotted \9;
		}
		input{
			margin-left: 0;
		}
		input:focus:required:invalid,
		textarea:focus:required:invalid,
		select:focus:required:invalid {
			color: #b94a48;
			border-color: #ee5f5b;
		}
		input:focus:required:invalid:focus,
		textarea:focus:required:invalid:focus,
		select:focus:required:invalid:focus {
			border-color: #e9322d;
			-webkit-box-shadow: 0 0 6px #f8b9b7;
			-moz-box-shadow: 0 0 6px #f8b9b7;
			box-shadow: 0 0 6px #f8b9b7;
		}
		:-moz-placeholder {
			color: #999999;
		}
		::-webkit-input-placeholder {
			color: #999999;
		}
		.help-block,
		.help-inline {
			color: #555555;
		}
		.help-block {
			display: block;
			margin-bottom: 9px;
		}
		.help-inline {
			display: inline-block;
			*display: inline;
			*zoom: 1;
			vertical-align: middle;
			padding-left: 5px;
		}
		.form-horizontal input,
		.form-horizontal .help-inline {
			display: inline-block;
			margin-bottom: 0;
		}

		.control-group {
			margin-bottom: 9px;
		}
		.form-horizontal .control-group {
			margin-bottom: 18px;
			*zoom: 1;
		}
		.form-horizontal .control-group:before,
		.form-horizontal .control-group:after {
			display: table;
			content: "";
		}
		.form-horizontal .control-group:after {
			clear: both;
		}
		.form-horizontal .control-label {
			float: left;
			width: 140px;
			padding-top: 5px;
			text-align: right;
		}
		.form-horizontal .controls {
			margin-left: 160px;
			*display: inline-block;
			*margin-left: 0;
			*padding-left: 20px;
		}
		.form-horizontal .help-block {
			margin-top: 9px;
			margin-bottom: 0;
		}
		.form-horizontal .form-actions {
			padding-left: 160px;
		}
		/*helps info*/

		.form-horizontal .help-inline {
			position: relative;
			padding: 3px 6px;
			background: #444;
			color: #fff;
			z-index: -2;
			border-radius: 3px;
			-webkit-transition:all 0.5s;
			-moz-transition:all 0.5s;
			-o-transition:all 0.5s;
			-ms-transition:all 0.5s;
			transition:all 0.5s;
			position: relative;
			margin-left: -500px;
		}	
		.form-horizontal .help-inline::before {
			content:"";
			display: block;
			height: 0;
			width: 0;
			position: absolute;
			top: 7px;
			left: -12px;
			border: 6px solid transparent;
			border-right-color: #444;
			z-index: 2;
		}
		.controls {
			position: relative;
			overflow: hidden;
		}	
		.form-horizontal .help-block {
			background: #444;
			border-radius: 3px;
			padding: 3px 6px;
			position: absolute;
			top: 28px;
			left: 0;
			z-index: -2;
			color: #fff;
			-webkit-transition:all 0.5s;
			-moz-transition:all 0.5s;
			-o-transition:all 0.5s;
			-ms-transition:all 0.5s;
			transition:all 0.5s;
		}
		.form-horizontal .help-block::after {
			border: 6px solid transparent;
			border-bottom-color: #444;
			content:"";
			display: block;
			height:0;
			width: 0;
			left: 5px;
			top: -12px;
			z-index: 2;
			position: absolute;
		} 
		.form-horizontal input:active + .help-inline,
		.form-horizontal input:focus + .help-inline {
			margin-left: 8px;
		}
		.form-horizontal .controls-block input:active,
		.form-horizontal .controls-block input:focus {
			margin-bottom: 35px;
		}
	

上面表单样式代码都是现成的,我就是一个拿来主义者,将bootstrap的表单的样式运用过来了,不过bootstrap表单的样式可没有动态显示帮助信息的功能。那么我在下面想给大家介绍的是这段代码。

1、提示信息样式

	.controls {
			position: relative;
			overflow: hidden;
	}	
	.form-horizontal .help-inline {
			position: relative;
			padding: 3px 6px;
			background: #444;
			color: #fff;
			z-index: -2;
			border-radius: 3px;
			-webkit-transition:all 0.5s;
			-moz-transition:all 0.5s;
			-o-transition:all 0.5s;
			-ms-transition:all 0.5s;
			transition:all 0.5s;
			position: relative;
			margin-left: -500px;
		}	
		.form-horizontal .help-inline::before {
			content:"";
			display: block;
			height: 0;
			width: 0;
			position: absolute;
			top: 7px;
			left: -12px;
			border: 6px solid transparent;
			border-right-color: #444;
			z-index: 2;
		}		
		.form-horizontal .help-block {
			background: #444;
			border-radius: 3px;
			padding: 3px 6px;
			position: absolute;
			top: 28px;
			left: 0;
			z-index: -2;
			color: #fff;
			-webkit-transition:all 0.5s;
			-moz-transition:all 0.5s;
			-o-transition:all 0.5s;
			-ms-transition:all 0.5s;
			transition:all 0.5s;
		}
		.form-horizontal .help-block::after {
			border: 6px solid transparent;
			border-bottom-color: #444;
			content:"";
			display: block;
			height:0;
			width: 0;
			left: 5px;
			top: -12px;
			z-index: 2;
			position: absolute;
		} 
	

上面采用了一些CSS3属性,制作了一个tooltip的样式效果,代码很简单,不过有两种我单独提出来:

		.form-horizontal .help-inline {			
			
			margin-left: -500px;
			
		}	
	

在“help-inline”样式中,使用“margin-left”的负值来隐藏帮助信息,当然大家可以将其值设置的更大,按需设置吧。

		.form-horizontal .help-block {
			
			position: absolute;
			top: 28px;
			left: 0;
			z-index: -2;
			
		}
	

上面的这几行代码是用来设置块状帮助信息,在表单加入的时候不显示出来,位置的定制主要是靠“top”和“left”值,而隐藏是依靠“z-index”的值。

2、显示提示信息

这一步是今天的最关键的地方了,就是如何让表单的文本框得到焦点时,相对应的表单帮助信息能显示出来,下面我们先来看实现这个功能的代码:

	
.form-horizontal input:active + .help-inline,
.form-horizontal input:focus + .help-inline {
	margin-left: 8px;
}
.form-horizontal .controls-block input:active,
.form-horizontal .controls-block input:focus {
	margin-bottom: 35px;
}
	

上面的几行代码就实现了我们需要功能,大家此时肯定会问为什么了?其实也并不是想像的那么复杂。关键性的功能来自于“CSS选择器”。一个是“相邻兄弟元素选择器(E + F)” ,另一个是伪类选择器。说得简单点“当表单得到焦点(:active和:focus)时其相邻的兄弟元素“help-inline/help-block”元素将做什么?”。因此在“.help-inline”我们改变了margin-left的值,由当初的“-500px”变成了“8px”。而对于块状提示信息,一但表单input得到焦点,就会增加一个“margin-bottom”值,从而使“help-block”显示出来。

功能就是这样实现的,是不是觉得很神呀,只可惜的是在IE下实现起来困难。不过对于不鸟IE的同学来说还是很适用的。我就把这个效果运用到一个iPhone的项目上。(^-^)

那么关于这个教程就说到这了,如果你感兴趣,可以点击这里查看所有代码,也可以下载源码自己学习。

最后希望大家喜欢,如果觉得这篇教程对你学习有帮助,多多支持本站。如果你有更好的思路可以在下面的评论中给我留言,与大家一起分享你的经验。

如需转载烦请注明出处:W3CPLUS

Nike Resurrect the Air Vortex From 1985

如需转载,烦请注明出处:https://www.w3cplus.com/css3/pure-css3-create-sliding-form-helps

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部