利用CSS3實現表單突出強調特效



21 81 28



特效描述:利用CSS3實現表單突出強調特效,利用CSS3實現表單突出強調特效

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.04022.js"></script>

3. HTML代碼

        <div class="container">
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/">
                    <strong>&laquo; Previous Demo: </strong>Fluid CSS3 Slideshow with Parallax Effect
                </a>
                <span class="right">
                    <a href="http://tympanus.net/codrops/2012/05/02/enhance-required-form-fields-with-css3/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->		
			<header>
				<span>Tips &amp; Tricks</span>
				<h1>Enhance Required Form Fields <span>with CSS3</span></h1>
				<nav class="codrops-demos">
					<a class="current-demo" href="index.html">Color</a>
					<a href="index2.html">Hide (scale)</a>
					<a href="index3.html">3D</a>
				</nav>
				<p>Click on the button to enhance required fields or de-emphasize/hide optional ones.</p>
				<p class="ie-note">D'oh!</p>
			</header>
			<section class="af-wrapper">
	            <h3>Random Form</h3>
				<input id="af-showreq" class="af-show-input" type="checkbox" name="showreq" />
				<label for="af-showreq" class="af-show">Enhance required fields</label>
				<form class="af-form" id="af-form" novalidate>
					<div class="af-outer">
						<div class="af-inner">
							<label for="input-title">Title</label>
							<input type="text" name="title" id="input-title">
						</div>
					</div>
					<div class="af-outer af-required">
						<div class="af-inner">
							<label for="input-name">Name</label>
							<input type="text" name="fullname" id="input-name" required>
						</div>
					</div>
					<div class="af-outer af-required">
						<div class="af-inner">
						  <label for="input-email">Email address</label>
						  <input type="email" name="email_address" id="input-email" required>
						</div>
					</div>
					<div class="af-outer">
						<div class="af-inner">
							<label for="input-bdate">Birth Date</label>
							<input type="date" name="birthdate" id="input-bdate" placeholder="MM/DD/YYYY">
						</div>
					</div>
					<div class="af-outer af-required">
						<div class="af-inner">
						  <label for="input-country">Country</label>
						  <input type="email" name="country" id="input-country" required>
						</div>
					</div>
					<div class="af-outer">
						<div class="af-inner">
						  <label for="input-catname">Your cat's name</label>
						  <input type="email" name="catsname" id="input-catname">
						</div>
					</div>
					<div class="af-outer">
						<div class="af-inner">
						  <label for="input-phone">Phone Number</label>
						  <input type="email" name="phonenumber" id="input-phone">
						</div>
					</div>
					<input type="submit" value="Send it over!" /> 
				</form>
			</section>
        </div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動星星打分 切換按鈕 日期時間 時鐘 日歷 時間 日歷插件 時間日期插件 表單 表單美化 表單插件 表單美化插件 其他 css繪制樣式 日歷選擇器 時間選擇器 文本框 text文本框 下拉框 select下拉菜單 select美化 select美化框 復選框 復選按鈕 復選框美化 表單提交
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子