html css输入框纵向,HTML CSS3 实现文字和输入框组合效果

发送微博页面

html{padding:0px;margin:0px;}

body{padding:0px;margin:0px;text-align:center;background-color:#f4f4f4;}

/** 弹出层背景 **/

.pop-bg{background-color:black;filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity: 0.1; opacity: 0.1;border-radius: 15px;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(188, 188, 188, 0.5);}

.pop-body{padding:10px;}

.pop-body-title{float:left;border-radius: 10px;background-color:#769fce;width:100%;border:1px solid #4096ee;}

.title-text{float:left;color: black; font-size: 22px;padding-left:10px;}

.title-close{float:right;cursor:pointer;padding-right:15px;padding-top:3px;}

.title-close a{text-decoration: none;color:black;font-weight:bold;padding-left:5px;padding-right:5px;}

.title-close a:hover{text-decoration: none;color:red;display: inline-block;background:#c0d3e7;border-radius: 5px;padding-left:5px;padding-right:5px;}

/** 内容部份 **/

.pop-body-context{

border-radius: 10px;background-color:#769fce;width:100%;border:1px solid #4096ee;

float:left;

margin-top:15px;

}

.pop-body-c-title{

float:left;

}

.a-btn{

-moz-border-bottom-colors: none;

-moz-border-image: none;

-moz-border-left-colors: none;

-moz-border-right-colors: none;

-moz-border-top-colors: none;

-moz-transition: all 0.3s linear 0s;

background: -moz-linear-gradient(center top , #FEDA71 0%, #FEBB4A 100%) repeat scroll 0 0 transparent;

border-color: #F5B74E #E5A73E #D6982F;

border-radius: 4px 4px 4px 4px;

border-style: solid;

border-width: 1px;

box-shadow: 0 1px 1px #D3D3D3, 0 1px 0 #FEE395 inset;

display: inline-block;

float: left;

height: 34px;

margin: 10px;

margin-right: 3px;

margin-left: 4px;

overflow: hidden;

padding: 5px 130px 0 0px;

position: relative;

text-decoration: none;

}

.a-btn-text{

padding-top:5px;

display:block;

font-size:14px;

white-space:nowrap;

color:#996633;

text-shadow:0 1px 0 #fedd9b;

-webkit-transition:all 0.3s linear;

-moz-transition:all 0.3s linear;

-o-transition:all 0.3s linear;

transition:all 0.3s linear;

font-weight:bold;

}

.a-btn-slide-text{

position:absolute;

top:35px;

left:0px;

width:auto;

height:0px;

background:#fff;

color:#996633;

font-size:13px;

white-space:nowrap;

font-family:Georgia, serif;

font-style:italic;

overflow:hidden;

line-height:40px;

-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;

-moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;

box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;

-webkit-transition:height 0.3s linear;

-moz-transition:height 0.3s linear;

-o-transition:height 0.3s linear;

transition:height 0.3s linear;

}

.a-btn-icon-right{

position:absolute;

right:0px;

top:0px;

height:41px;

width:130px;

border-left:1px solid #f5b74e;

-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;

-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;

box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;

}

.a-btn:hover{

height:65px;

-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);

box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);

}

.a-btn:hover .a-btn-text{

text-shadow:1px 1px 1px rgba(0,0,0,0.2);

color:#fff;

}

.a-btn:hover .a-btn-slide-text{

height:40px;

}

.a-btn-slide-text input{

float:left;

margin-top:4px;

margin-left:2px;

}

.pop-body-c-text{

padding-left:3px;

}

.pop-body-c-textarea{

width:780px;

height:100px;

}

.pop-body-row-u{

padding-top:5px;

padding-left:10px;

}

.a-t-i-r-t{

font-size:14px;height:20px;overflow:hidden;padding-top:8px;text-align:center;

}

.pop-body-images-l{

padding:10px;

}

.pop-body-ims-panel{

padding:10px;

}

.pop-b-i-i-img{

border-radius:8px;

float:left;

position:relative;

left:-20px;

}

.pop-b-i-i-unit{

float:left;

}

.pop-b-i-i-unit input{

float:left;

position:relative;

z-index:99;

}