Yoo~
Trago um novo tutorial de uma barra de pesquisa super legal!!
Aconselho por ela no cabeçalho(lembram daquele da Dianna Agron?)
Eu amei!!
/** SEARCH **/
input {outline: none;}
input:-moz-placeholder {color: transparent;}
input::-webkit-input-placeholder {color: transparent;}
input::-webkit-search-cancel-button {display: none;}
input[type=search] {-webkit-appearance: textfield; -webkit-box-sizing: content-box; font: 12px 'Calibri';}
input[type=search] {background: #CORDEFUNDO url('http://static.tumblr.com/yqaaqpd/C53mevbfl/-.png') no-repeat 9px center; border: solid 1px #CORDABORDA; padding: 10px 10px 10px 0px; width: 55px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-transition: .5s; -moz-transition: .5s; transition: .5s;}
.search input[type=search] {width: 18px; cursor: pointer; padding-left: 10px; color: transparent;}
.search input[type=search]:focus {width: 130px; padding-left: 32px; color: #363636; cursor: auto;}
.search input:-moz-placeholder {color: transparent;}.search input::-webkit-input-placeholder {color: transparent;}
2.Em um gadget HTML/Javascript cole:
<form class="search"><input type="search" placeholder="Search" /></form>E já está!!
Adorei o tutorial!
ResponderEliminarObrigada :)
Eliminar