jquery menambah gaya input

Dalam reka bentuk web, kotak input adalah salah satu cara utama untuk pengguna memasukkan maklumat Keindahan gayanya secara langsung mempengaruhi pengalaman pengguna. Sebagai perpustakaan JavaScript yang sangat popular, jQuery boleh membantu kami menambah dan mengubah suai gaya input dengan mudah. Artikel ini akan memperkenalkan beberapa operasi jQuery biasa untuk membantu anda meningkatkan gaya kotak input dengan cepat.

1. Tetapan gaya asas

1. Ubah suai warna latar belakang

Anda boleh menetapkan warna latar belakang kotak input melalui kod berikut:

$('input').css('background-color', '#f6f6f6');

2. Ubah suai warna jidar

Begitu juga, kod berikut boleh menetapkan warna sempadan kotak input:

$('input').css('border-color', '#ccc');

3. Ubah suai warna teks

Kod adalah seperti berikut, anda boleh menukar warna aksara yang dimasukkan dalam kotak input:

$('input').css('color', '#666');

4. Tetapkan lengkok sempadan

Kodnya adalah seperti berikut, anda boleh meningkatkan lengkok sempadan kotak input ：

$('input').css('border-radius', '5px');

2. Tetapan gaya lanjutan

Selain gaya asas, kami juga boleh mencapai lebih banyak kesan diperibadikan melalui beberapa tetapan gaya khas.

1. Kesan bayang

Kod berikut boleh menambah kesan bayang pada kotak input:

$('input').css('box-shadow', '0 0 4px #999');

2. Isi kecerunan

Kod adalah seperti berikut, anda boleh menambah kesan isian kecerunan pada kotak input:

$('input').css('background-image', 'linear-gradient(to bottom, #fff, #f9f9f9)');

3. Tetapkan lebar dan tinggi

Kod adalah seperti berikut, anda boleh menetapkan lebar dan tinggi kotak input:

$('input').css('width', '200px');
$('input').css('height', '30px');

4. Kesan terapung

Kod adalah seperti berikut, anda boleh menambah kesan terapung pada input kotak:

$('input').hover(function(){
    $(this).css('border-color', '#666');
}, function(){
    $(this).css('border-color', '#ccc');
});

5. Ubah suai fon dan saiz teks

Kod adalah seperti berikut, anda boleh mengubah suai jenis dan saiz fon teks yang dimasukkan dalam kotak input:

$('input').css('font-family', 'Arial');
$('input').css('font-size', '14px');

3. Realisasikan kesan dinamik kotak carian

Akhir sekali, kami mengambil kotak carian sebagai contoh, melalui jQuery mencapai kesan dinamik. Apabila kita memasukkan teks dalam kotak carian, warna latar belakang dan warna fon akan berubah.

Kod HTML:

<div class="search-box">
    <input type="text" class="search-input" placeholder="请输入搜索内容">
</div>

Kod jQuery:

$('.search-input').on('input', function(){
    if($(this).val() != ''){
        $(this).css('background-color', '#fff');
        $(this).css('color', '#333');
    }else{
        $(this).css('background-color', '#f6f6f6');
        $(this).css('color', '#ccc');
    }
});

Dengan mendengar peristiwa input kotak input, apabila terdapat nilai dalam kotak input, tukar latar belakang warna dan fon warna kotak input.

Ringkasnya, kita boleh menggunakan jQuery untuk melaksanakan pelbagai pengubahsuaian dengan mudah pada gaya kotak input. Dengan menguasai contoh dan idea di atas, saya percaya anda boleh mencapai kesan yang lebih diperibadikan sendiri dan meningkatkan lagi kualiti reka bentuk web.

Atas ialah kandungan terperinci jquery menambah gaya input. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!