Modifikasi Placeholder dengan CSS3

Blog Tidak ada komentar

Wah lama gak ngeshare trik blog nih hahahaha,udah pada banyak yang kangen ya? sama trik blog kita?.
sok atuh kali ini kita akan bahas "Modifikasi Placeholder dengan CSS3". yap placeholder tuh kayak gini lah lebih jelasnya
Oke langsung aje ya gak pakai lama kita share triknya 1.Siapkan Kopi dan Martabak (LOL) 2.Siapkan rich editor kalian,entah itu sublime,notepad++,brackets sama aja lah :D 3. Copas coding ini:

/*------------------------------------*\
  MAIN
\*------------------------------------*/
/* GO! */

body {
  font: 14px/20px Arial;
  background: #ccc;
  padding: 50px;
  width: 600px;
  margin: 0 auto;
}

h1,h2,h3,h4,h5,h6 {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0 5px;
}

p {
  margin: 0 0 10px;
}

a {
  color: teal;
}

a:hover {
  color: black;
}

input {
  padding: 10px 15px;
  border: 1px solid #666;
  -webkit-appearance: none
}

.searchlabel {
  font-size: 15px;
  font-family: Georgia;
  font-style: italic;
  color: #666;
  cursor: text;
  margin: -31px 0 0 15px;
  position: absolute;
  display: block;
}

.place:focus + .searchlabel {
  margin-top: -70px;
}
.place:hover + .searchlabel {
  opacity: 0.5;
}
.place:focus + .searchlabel {
  opacity: 1;
  cursor: auto;
}

.searchlabel::after {
  content: 'Enter Text To Search';
}
.place:hover + .searchlabel::after {
  content: 'Click to Remove This';
}
.place:focus + .searchlabel::after {
  content: 'Press Enter To Submit';
}

.searchlabel {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
<div style="text-align: center;">
</div>
}</span></pre>
</center>

4.Ketik coding HTML ini <body id="home"> <input class="place" type="search" id="search" size="50">
<label class="searchlabel" for="search"></label>
jangan lupa includekan CSS yang tadi
'

selamat mencoba ^^

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )

Modifikasi Placeholder dengan CSS3

Tidak ada komentar :

Labels

Popular Posts

Info

Iklan/ADS