12
تشکر

استایل دادن به عناصر فرم – بخش دوم

استایل دادن به عناصر فرم

استایل دادن به عناصر فرم

در این بخش که ادامه بخش اول استایل دادن به عناصر فرم است به آموزش استایل دادن به عناصر file  میپردازیم.

این عنصر کمی با عناصر چک باکس و ریدیو فرق میکنند. در این نوع ما ابتدا خود عنصر file  را برمیداریم سپس استایل مورد نظر را میسازیم و در مرحله بعد آن را با استفاده از جاوا اسکریپت به عنصر اصلی وصل میکنیم.

 


عنصر file

ابتدا عنصر را در صفحه میگذاریم.

<label>ارسال مدارک:</label>
<div class="refile">انتخاب کنید<div></div></div>
<input class="file" type="file" />

در ادامه با ما همراه باشید…

سپس نوبت به استایل میرسد.

.form .file{
    display:none;
}
.form .refile{
    padding:5px 20px;
    background:#1f668c;
    float:right;
    border-radius:5px;
    border:solid 1px #2496a7;
    color:#fff;
    cursor: pointer;
    text-align:center;
}
.form .refile div{
    background: white;
    color: black;
    border-radius: 3px;
    padding: 2px;
    box-shadow: 0px 0px 4px inset;
}

تا اینجا ما فقط عنصر اصلی file را مخفی کردیم. سپس یک استایل مناسب درست کردیم. حالا نوبت به جاوا اسکریپت است که اگر کاربر روی استایل ما کلیک کرد مانند این باشد که روی عنصر اصلی file کلیک کرده است.

$(document).ready(function(){
    $('.form .file').change(function(){
        var val=$(this).val();
        $(this).prev('.refile').find('div').text(val);
    })
    $('.form .refile').click(function(){
        var val=$(this).next('.file').click().val();
    })
})

اگر کمی با jquery کار کرده باشید کد بالا برای شما آسان است.

در بخش آینده با نحوه استایل دادن به list آشنا میشویم.

مطالب مرتبط:

استایل دادن به عناصر فرم – بخش اول


  • نظرات این مطلب بسته است.