Customize Input Type File use CSS

Koben akan mencomot salah satu artikel semelehoy punya dari codrops tentang styling & customizing file inputs the smart way. Namun sebelum masuk ke sesi tersebut gue mau berbagi info trik mencegah blogger dari mengarahkan blog blogspot anda ke url negara² tertentu! Google telah membuat aturan baru bagi pengguna blogspot yg mana jika membuka url blog akan langsung diarahkan ke domain negara yg bersangkutan. Jika kita membuka salah satu url blog maka akan terjadi blah-bleh-bloh.blogspot.co.id kalau di inggris akan jadi blah-bleh-bloh.blogspot.co.uk dan seterusnya...

Untuk mencegah agar url blog tersayang kita tidak redirect, master Amit Agarwal telah membuat snippet JavaScript. Letakan di atas/sebelum tag </head>

<script type="text/javascript">//<![CDATA[
// Written by Amit Agarwal
/* Get the full URL of the current blogger page */

var blog = document.location.href.toLowerCase();

/* Do not redirect if the domain is .com already */
if (!blog.match(/\.blogspot\.com/)) {

/* Replace the country TLD with .com and ncr switch */
   blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");

/* Redirect to the new .com URL in the current tab */
   window.location.replace(blog);
}
    // Source: http://labnol.org/?p=21031
//]]></script>

SAVE...DONE.
Dengan tertanamnya java-script ini di dalam template, maka blogspot.com akan tetap adanya :)
Dari ragam komponen input salah satunya ada input type file yg mana banyak di pakai untuk melakukan aktifitas open file. Berikut contoh syntax HTML default input-type-file

Select a file:

Kita akan buat yg default itu menjadi full stylish dengan CSS karya master Osvaldas Valutis. Akan ada 7 macam gaya yg bisa kalian sikat. Mari kita mulai sesi pokok postingan sekarang ini :))

Taruh kode CSS input utama pada tempat semestinya.

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;    /* 10px 20px */
}
.inputfile:focus + label,.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}
.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;    /* 4px */
    margin-right: 0.25em;    /* 4px */
}

Kode CSS input utama ini harus ada, berikut kode-css ke-7 gaya input_type-style. File-Inputs-1

/* style 1 */

.inputfile-1 + label {

    color: #f1e5e6;

    background-color: #d3394c;

}

.inputfile-1:focus + label,.inputfile-1.has-focus + label,.inputfile-1 + label:hover {

    background-color: #722040;

}

/* style 2 */

.inputfile-2 + label {

    color: #d3394c;

    border: 2px solid currentColor;

}

.inputfile-2:focus + label,.inputfile-2.has-focus + label,.inputfile-2 + label:hover {

    color: #722040;

}

/* style 3 */

.inputfile-3 + label {

    color: #d3394c;

}

.inputfile-3:focus + label,.inputfile-3.has-focus + label,.inputfile-3 + label:hover {

    color: #722040;

}

/* style 4 */

.inputfile-4 + label {
color: #d3394c;
}
.inputfile-4:focus + label,.inputfile-4.has-focus + label,.inputfile-4 + label:hover {
color: #722040;
}
.inputfile-4 + label figure {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #d3394c;
display: block;
padding: 20px;
margin: 0 auto 10px;
}
.inputfile-4:focus + label figure,.inputfile-4.has-focus + label figure,.inputfile-4 + label:hover figure {
background-color: #722040;
}
.inputfile-4 + label svg {
width: 100%;
height: 100%;
fill: #f1e5e6;
}

/* style 5 */

.inputfile-5 + label {
color: #d3394c;
}
.inputfile-5:focus + label,.inputfile-5.has-focus + label,.inputfile-5 + label:hover {
color: #722040;
}
.inputfile-5 + label figure {
width: 100px;
height: 135px;
background-color: #d3394c;
display: block;
position: relative;
padding: 30px;
margin: 0 auto 10px;
}
.inputfile-5:focus + label figure,.inputfile-5.has-focus + label figure,.inputfile-5 + label:hover figure {
background-color: #722040;
}
.inputfile-5 + label figure::before,.inputfile-5 + label figure::after {
width: 0;
height: 0;
content: '';
position: absolute;
top: 0;
right: 0;
}
.inputfile-5 + label figure::before {
border-top: 20px solid #dfc8ca;
border-left: 20px solid transparent;
}
.inputfile-5 + label figure::after {
border-bottom: 20px solid #722040;
border-right: 20px solid transparent;
}
.inputfile-5:focus + label figure::after,.inputfile-5.has-focus + label figure::after,.inputfile-5 + label:hover figure::after {
border-bottom-color: #d3394c;
}
.inputfile-5 + label svg {
width: 100%;
height: 100%;
fill: #f1e5e6;
}

/* style 6 */

.inputfile-6 + label {
color: #d3394c;
height: 45px;
}
.inputfile-6 + label {
border: 1px solid #d3394c;
background-color: #f1e5e6;
padding: 0;
}
.inputfile-6:focus + label,.inputfile-6.has-focus + label,.inputfile-6 + label:hover {
border-color: #722040;
}
.inputfile-6 + label span,.inputfile-6 + label strong {
padding: 0.625rem 1.25rem; /* 10px 20px */
}
.inputfile-6 + label span {
width: 200px;
min-height: 2em;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
}
.inputfile-6 + label strong {
height: 100%;
color: #f1e5e6;
background-color: #d3394c;
display: inline-block;
}
.inputfile-6:focus + label strong,.inputfile-6.has-focus + label strong,.inputfile-6 + label:hover strong {
background-color: #722040;
}

Berikut syntax HTML-nya
/* style 1 */

<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple/>

 <label for="file-1">

  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">

   <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>

  </svg>

 <span>Choose a file&hellip;</span>

</label>

/* style 2 */

<input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" data-multiple-caption="{count} files selected" multiple/>

 <label for="file-2">

  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">

   <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>

  </svg>

 <span>Choose a file&hellip;</span>

</label>

/* style 3 */

<input type="file" name="file-3[]" id="file-3" class="inputfile inputfile-3" data-multiple-caption="{count} files selected" multiple/>

 <label for="file-3">

  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">

   <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>

  </svg>

 <span>Choose a file&hellip;</span>

</label>

/* style 4 */

<input type="file" name="file-4[]" id="file-4" class="inputfile inputfile-3" data-multiple-caption="{count} files selected" multiple/>

<label for="file-4">

 <span>Choose a file&hellip;</span>

</label>

/* style 5 */

<input type="file" name="file-5[]" id="file-5" class="inputfile inputfile-4" data-multiple-caption="{count} files selected" multiple/>

 <label for="file-5">

  <figure>

   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">

    <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>

   </svg>

  </figure>

 <span>Choose a file&hellip;</span>

</label>

/* style 6 */

<input type="file" name="file-6[]" id="file-6" class="inputfile inputfile-5" data-multiple-caption="{count} files selected" multiple/>

 <label for="file-6">

  <figure>

   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">

    <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>

   </svg>

  </figure>

 <span></span>

</label>

/* style 7 */

<input type="file" name="file-7[]" id="file-7" class="inputfile inputfile-6" data-multiple-caption="{count} files selected" multiple/>

 <label for="file-7">

  <span></span>

   <strong>

    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">

     <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>

    </svg> 

   Choose a file&hellip;

  </strong>

</label>

Source: tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way

Customize Input Type File use CSS

Customize input type file menggunakan CSS, JavaScript mencegah blogger dari mengarahkan blogspot anda ke url-negara tertentu.

Customize Input Type File use CSS

My ETC

KATEGORI

Contact Form Beben

MISC

Resources

FACEBOOK PAGE