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

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


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

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

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

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

برای تغییر شکل دکمه آپلود ابتدا 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>

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

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

دانلود

نویسنده حسین فتحی
گروه مطلب CSS
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۲۷ خرداد ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران مهمان
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم