Modifikasi Textarea Dengan CSS Plus Tombol

Modifikasi Textarea Dengan CSS Plus Tombol - Textarea tanpa style akan mengasilkan tampilan textarea yang biasa saja, dalam hal ini ada sedikit tambahan style CSS dan penambahan tombol seleksi untuk sebuah Textarea, hasil akhir mungkin tidak begitu baik karena dalam hal ini hanya menitik beratkan pada Properti Box Shadow dan warna gradient untuk tombolnya.

Pemilihan box-shadow sebagai unsur utama dalam memodifikasi textarea, karena selain penulisan kodenya tidak panjang tapi menghasilkan bentuk yang cukup menawan (menurut saya), sedangkan untuk tombol bisa kalian perbaiki dengan style bentuk tombol yang lebih baik, atau bisa menggunakan tombol generator untuk mempermudahnya, jika warna yang dipergunakan tidak cocok dengan warna background template yang dipergunakan.

Untuk peletakan textareanya sendiri bisa ditempatkan dalam postingan atau pada sidebar sebagai widget (masuk menu layout pada dashboar blogger - pilih Add Gadget - HTML/javascript dan save)

<form>
<div style="text-align:center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Pilih Semua" /></div>
<div style="text-align:center">
<textarea name="txt">isi text area</textarea></div>
</form>

Sedangkan untuk style Css-nya bisa diletakan dantara <b:skin><![CDATA[ dan ]]></b:skin> pada template.

CSS

input {
  color: #555;
  cursor: pointer;
  padding: 6px 30px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid #8c8c8c;
  text-shadow: 0px -1px 0px #B0B0B0;
  font: bold 15px Arial, Helvetica, sans-serif;
  box-shadow: inset 0px 1px 0px 0px #c9c9c9;
  background-image: linear-gradient(bottom, #787678 28%, #9C9C9C 82%);
  background-image: -o-linear-gradient(bottom, #787678 28%, #9C9C9C 82%);
  background-image: -moz-linear-gradient(bottom, #787678 28%, #9C9C9C 82%);
  background-image: -webkit-linear-gradient(bottom, #787678 28%, #9C9C9C 82%);
  background-image: -ms-linear-gradient(bottom, #787678 28%, #9C9C9C 82%);
}
input:active {
  position: relative;
  top: 1px;
}
input:hover {
  box-shadow: 0px 1px 0px 0px #c9c9c9;
  text-shadow: 0px 1px 0px #a3a3a3;
}
textarea {
  background: #ccc;
  width: 500px;
  height: 200px;
  color: Black;
  padding: 10px;
  border-radius: 5px;
  box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.3);
}

• Demo

Sederhana namum memberikan tampilan yang berbeda untuk sebuah tampilan textarea, atau ingin dimodifikasi lagi agar sesuai dengan selera, itu lebih baik lagi. Semoga tampilan yang dihasilkan lebih baik dari yang saya share ini. Terima Kasih.