www.gusucode.com > 200套html5精品模板1_50 > 200套html5精品模板1_50/015/css/form.css
/****Form****/ #form { padding-top: 3px; } #form input { width: 100%; height: 43px; float:left; background: #eeecee; box-sizing: border-box; -webkit-appearance: none; -moz-box-sizing: border-box; /*Firefox 1-3*/ -webkit-box-sizing: border-box; /* Safari */ color: #6e6b6e; font: 14px/20px 'Open Sans', sans-serif; border: 1px solid #e6e4e6; padding: 8px 12px 13px; } #form textarea { width: 100%; height:379px; position: relative; resize:none; overflow: hidden; box-sizing: border-box; -webkit-appearance: none; -moz-box-sizing: border-box; /*Firefox 1-3*/ -webkit-box-sizing: border-box; /* Safari */ float:left; margin: 0; color: #6e6b6e; font: 14px/20px 'Open Sans', sans-serif; border: 1px solid #e6e4e6; background: #eeecee; padding: 8px 12px 13px; } #form ._placeholder { transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; color: #6e6b6e; font: 14px/20px 'Open Sans', sans-serif; border: 1px solid transparent; padding: 8px 12px 13px; height: 43px !important; width: 100% !important; box-sizing: border-box; -moz-box-sizing: border-box; /*Firefox 1-3*/ -webkit-box-sizing: border-box; /* Safari */ position: absolute; right: 0; top: 0 !important; bottom: 0; left: 0; cursor: text !important; display: block; } #form ._placeholder.hidden { display: none; } #form ._placeholder.focused { opacity: 0.3; } #form .message ._placeholder { height: 100% !important; } #form label { position:relative; display: block; min-height: 80px; float: left; width: 177px; } #form label+label { margin-left: 25px; } #form label.message { width: 100%; position: relative; margin-left: 0; } #form .error-message, #form .empty-message { color: #E02A05; font-size: 10px; line-height:14px; width:auto; position: absolute; z-index: 999; top: 10px; opacity: 0; right: 5px; float:left; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } /*#form .message .error-message, #form .message .empty-message { bottom: -16px; }*/ #form .invalid .error-message, #form .empty .empty-message { opacity: 1; } .btns { text-align: right; padding-top: 49px; font-size: 0; line-height: 0; } .btns a.btn { margin-top: 0; background-color: #e06091; display: inline-block; min-width: 90px; padding: 2px 0; font: 24px/30px 'Economica', sans-serif; color: #fff; text-align: center; margin-left: 5px; } .btns a.btn:hover { background-color: #9A1356; } .btns a.btn+a.btn { margin-left: 14px; } .message br { height: 0; line-height: 0; } #form .success-message { position: absolute; background: #EEECEE; border: 1px solid #e6e4e6; width: 100%; display: none; opacity: 0; height: 43px; opacity: 0; padding: 11px 10px; text-align: center; z-index: 999; box-sizing: border-box; -moz-box-sizing: border-box; /*Firefox 1-3*/ -webkit-box-sizing: border-box; /* Safari */ transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } #form.success .success-message { display: block; opacity: 1; } .success_wrapper { position: relative; }