Variasi border pada textarea

---

    Tiada bosan-bosannya jOe ngucapin "Selamat Pagi". Bagaimana aktifitas sObat di pagi ini? semoga tetap semangat yah.

    Untuk menghiasi pagi yang segar ini, tentunya jOe akan memposting tutorial yang segar pula untuk sObat JuniOr semua. Tutorial kali ini kita akan bermain dengan textarea, kira-kira apa sih textarea itu? dan apa fungsinya?

    Textarea adalah sebuah wadah berupa kotak yang dapat digunakan untuk menempatkan teks, kode atau script, hingga akan terbaca sebagaimana yang kita isikan di dalamnya. Textarea bisa kita gunakan sebagai kotak script, link exchange, dan memudahkan sObat dalam meng-copy paste script tersebut.

Contoh TextArea Standart :

Text Area Standart Tanpa Variasi

Bagaimana menampilkan textarea dengan border yang bervariatif seperti di bawah ini: Cekidot



<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 7px 7px 7px 7px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border-color: rgb(255, 0, 0); border-style: solid; border-width: 2px 2px 2px 20px; color: #eeeeee; line-height: 1.5em; padding: 5px;"> www.Junior70an.co.cc </textarea>


<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 5px 5px 5px 5px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 5px inset rgb(255, 0, 0); color: white; line-height: 1.5em; padding: 0pt 7px;"> www.Junior70an.co.cc </textarea>


<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 5px 5px 5px 5px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 5px outset rgb(255, 0, 0); color: white; line-height: 1.5em; padding: 0pt 7px;"> www.Junior70an.co.cc </textarea>


<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 10px 10px 10px 10px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border-color: rgb(255, 0, 0) rgb(250, 100, 10) rgb(250, 100, 10) rgb(255, 0, 0); border-style: solid; border-width: 5px; color: white; line-height: 1.5em; padding: 5px;"> www.Junior70an.co.cc </textarea>


<textarea cols="20" name="code" rows="3" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 3px ridge rgb(255, 0, 0); color: #eeeeee; line-height: 1.5em; padding: 5px;"> www.Junior70an.co.cc </textarea>


<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 3px dashed rgb(255, 0, 0); color: #eeeeee; line-height: 1.5em; padding: 5px;"> www.Junior70an.co.cc </textarea>


<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 3px dotted rgb(255, 0, 0); color: #eeeeee; line-height: 1.5em; padding: 5px;"> www.Junior70an.co.cc </textarea>


<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 6px double rgb(255, 0, 0); color: white; line-height: 1.5em; padding: 5px;"> www.Junior70an.co.cc </textarea>

Caranya :

◘  Copy-paste script yang ada di dalam textarea yang sObat pilih.
◘  Ganti "www.Junior70an.co.cc" dengan text yang sObat ingin tampilkan di textarea tersebut.
◘  Bagi sobat yang ingin menampilkan script di textarea, jangan lupa script nya di parse terlebih dahulu, click disini



(+) Jika sObat ingin menambah kan tombol "Select All" pada textarea tersebut,

<div class="codebox"><form style="font-family: monospace; font-size: 8pt;" name="copy"><input onclick="javascript:this.form.txt.focus();this.form.txt.select(); this.form.txt.copy();" value="Select All" type="button"> www.Junior70an.co.cc </form></div>

Caranya :

◘  Copy-paste script berikut.
◘  Ganti "www.Junior70an.co.cc" dengan script textarea sObat.


Happy blogging dan semoga bermanfaat yah. 


Thanks tO : Kang fathur