Menyembunyikan garis aktif form atau textarea di Browser Chrome setelah Mouse klik

Perna membuat css style form atau textarea..?, mungkin pernah atau pun ingin tampilannya textarea ataupun form tersebut di custom sedemikian rupa untuk tampil style dan terlihat heee.

Ketika kita membuat css form ataupun textarea ternyata di berbagai peramban browser berbeda beda. 

Katakanlah kita ingin menyembunyikan garis form/textarea dengan membuat CSS input#myID {border:none;}, di keumuman browser bekerja baik mouse aktif ataupun tidak aktif.

Namun di browser google chrome ketika form tersebut di ketik mouse aktif, justru garis form/textarea tersebut masih aktif dan kelihatan sekali border garisnya.

Bagaimana cara menghilangkan garis border ketika form aktif di peramban chrome..?. Yaelah hanya dengan menambahkan css [ outline: none; ] tersebut garis aktif form/ textarea pada chrome tersembunyi.

Namun ketika kita belum tahu serasa bingung sewaktu ingin menghilangkan garis tersebut. 

Perbedaannya ada Outline dan tidak [ Testnya di Browser Chrome ]:

Tidak ada Outline

<style type='text/css'>
input.untukInput1 {
  border-bottom: 3px solid #ccc;
  border-left:none;
  border-right:none;
  border-top:none;
 }
</style>
<input class="untukInput1" type="text" size="20" placeholder="Test1" name="Input"/>

Ada Outline custom [none]

<style type='text/css'>
input.untukInput2 {
  border-bottom: 3px solid #ccc;
  border-left: none;
  border-right: none;
  border-top: none;
  outline: none;
 }
</style>
<input class="untukInput2" type="text" size="20" placeholder="Test1" name="Input"/>