mohammad425
سه شنبه 13 بهمن 1394, 15:31 عصر
label هارو بعد از input و textarea بزارید و با استفاده از انتخاب گر + تغییرات دلخواه رو روش انجام بدین:
<form id="Settings_form" class="col-md-5" action="" method="post"> <div> <input placeholder="عنوان سایت" id="title_site" type="text" /> <label for="title_site">عنوان سایت</label> </div> <div> <textarea placeholder="برچسب های سایت" id="tags"></textarea> <label for="tags">برچسب های سایت سایت</label> </div> </form>
#Settings_form {
display: inline-block;
float: none;
margin: 50px;
}
#Settings_form div > input {
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
display: block;
padding: 10px;
width: 100%;
}
#Settings_form div > textarea {
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
display: block;
padding: 10px;
width: 100%;
resize: vertical;
min-height: 100px;
}
#Settings_form div > label {
background-color: #3685cf;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #fff;
margin: 0;
padding: 10px;
transition: all 400ms ease-in-out;
position: absolute;
top: -30px;
}
#Settings_form div {
margin-bottom: 30px;
position: relative;
}
#Settings_form div > input:focus + label {
background-color: #36b4cf;
}
#Settings_form div > textarea:focus + label {
background-color: #36b4cf;
}