آموزش Css تغییر ظاهر و متن دکمه آپلود فایل (browse ) در تگ input

باسلام

همانطور که میدانید فیلد آپلود دارای یک استایل معمولی و متن از پیش تعریف شده است که این استایل و متن پیش فرض جلوه ی کاربر پسندی ندارد. در این آموزش قصد دارم به شما نشان بدهم که چگونه میتوان فقط با استفاده از کدهای css به این دکمه آپلود فایل استایل و متن دلخواه را اعمال کرد.

برای مشاهده دموی این آموزش اینجا کلیک کنید.

ابتدا با استفاده از کدهای HTML زیر دکمه آپلود فایل را ایجاد میکنیم:

<label  class="custom-file-input">
    <input type="file">
</label>
<label  class="custom-file-input file-blue">
    <input type="file">
</label>

سپس با استفاده از کدهای CSS زیر استایل مورد نظر را بر روی فیلد آپلود اعمال میکنیم.

توجه کنید که همانطور که در دمو مشاهده میکنید این کدهای css برای استایل دهی به دو دکمه آپلود فایل نوشته شده و برای همین یکم طولانی هست و اگه شما در فرم مورد نظرتون فقط یک دکمه دارید فقط قسمت مورد نیاز را کپی کنید.

برای تغییر متن دکمه ها دو قسمت Choose File و Browse File را به متن دلخواه تغییر دهید.

<style>
    .custom-file-input {
        display: inline-block;
        position: relative;
        color: #533e00;
    }
    .custom-file-input input {
        visibility: hidden;
        width: 100px;
    }
    .custom-file-input:before {
        content: 'Choose File';
        display: block;
        background: -webkit-linear-gradient( -180deg, #ffdc73, #febf01);
        background: -o-linear-gradient( -180deg, #ffdc73, #febf01);
        background: -moz-linear-gradient( -180deg, #ffdc73, #febf01);
        background: linear-gradient( -180deg, #ffdc73, #febf01);
        border: 3px solid #dca602;
        border-radius: 10px;
        padding: 5px 0px;
        outline: none;
        white-space: nowrap;
        cursor: pointer;
        text-shadow: 1px 1px rgba(255,255,255,0.7);
        font-weight: bold;
        text-align: center;
        font-size: 10pt;
        position: absolute;
        left: 0;
        right: 0;
    }
    .custom-file-input:hover:before {
        border-color: #febf01;
    }
        .custom-file-input:active:before {
        background: #febf01;
    }
    .file-blue:before {
        content: 'Browse File';
        background: -webkit-linear-gradient( -180deg, #99dff5, #02b0e6);
        background: -o-linear-gradient( -180deg, #99dff5, #02b0e6);
        background: -moz-linear-gradient( -180deg, #99dff5, #02b0e6);
        background: linear-gradient( -180deg, #99dff5, #02b0e6);
        border-color: #57cff4;
        color: #FFF;
        text-shadow: 1px 1px rgba(000,000,000,0.5);
    }
    .file-blue:hover:before {
        border-color: #02b0e6;
    }
    .file-blue:active:before {
        background: #02b0e6;
    }
</style>

 

برای دانلود همه ی کدها در یک فایل جداگانه اینجا کلیک کنید.

منبع: htmllion

موفق باشید.

 

 

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها :

1 دیدگاه بر “آموزش Css تغییر ظاهر و متن دکمه آپلود فایل (browse )”

  1. محمد گفت:

    سلام.. آموزش مفیدی بود. خیلی دنبالش گشتم فقط همین سایتو پیدا کردم.. ممنون..
    من طبق آموزش استایل دهی کردم .. Browse که استایل دهی کردم برای انتخاب فایل عکسه. میخوام وقتی کاربر عکس رو از سیستمش انتخاب کرد بالای اون تو یه کادری عکس به نمایش در بیاد.. چطور میتونم عکس رو به نمایش در بیارم؟؟ ممنون میشم راهنمایی کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

Time limit is exhausted. Please reload CAPTCHA.