تغییر شکل دکمه آپلود با CSS

در این پست نحوه تغییر شکل پیش فرض دکمه آپلود را با استفاده از CSS آموزش می دهیم.

اگر به تصویر زیر نگاه کنید می بینید که یک شکل ساده و با نوشته کلمه Browse روی دکمه نمایش داده می شود. ظاهرا شکل خوبی ندارد اما در ادامه شکل و رنگ دکمه را تغییر می دهیم و حتی به جای کلمه انکلیسی Browse از کلمه فارسی انتخاب استفاده می کنیم.

برای تغییر شکل دکمه آپلود ابتدا CSS های زیر را به برنامه خود اضافه کنید.

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    width: 50px;
    height: 40px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.btn-upload {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

حال به صفحه ی که دکمه آپلود دارید بروید و دکمه آپلود را داخل یک تگ span قرار دهید و سه کلاس btn وbtn-upload  و btn-file را به span اضافه کنید. و سپس کلمه انتخاب را بنویسید و سپس دکمه آپلود را قرار دهید.

<span class="btn btn-upload btn-file">
    انتخاب
    <input type="file">
</span>

در اینجا کار ما به پایان رسید و خروجی به صورت زیر خواهد شد.