Customize Input Type File use CSS - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Customize Input Type File use CSS, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Blogger, Article Informasi, Article Javascript, Article Snippet, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Customize Input Type File use CSS
link : Customize Input Type File use CSS

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./* 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

Thus articles Customize Input Type File use CSS

that is all articles Customize Input Type File use CSS This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Customize Input Type File use CSS with the link address https://autopostingblogspot.blogspot.com/2015/09/customize-input-type-file-use-css.html