Maison > interface Web > tutoriel CSS > le corps du texte

Trucs et astuces pour implémenter des zones de sélection personnalisées avec CSS (exemple de code)

不言
Libérer: 2018-11-06 10:36:48
original
2083 Les gens l'ont consulté

La plupart des gens trouveront un peu difficile de styliser la zone de sélection, mais cet article vous aidera un peu. Vous pouvez essentiellement supprimer la sélection d'origine autant que possible, puis utiliser l'habillage div pour le style (applicable à IE8 +). ), sans plus attendre, passons directement au texte.

Cette méthode semble très simple, vous pouvez définir le style selon vos propres besoins (cours recommandé : tutoriel vidéo CSS)

Le code est le suivant :

HTML :

<div class="select-style">
  <select>
    <option value="city1">合肥</option>
    <option value="city2">南京</option>
    <option value="city3">芜湖</option>
    <option value="city4">杭州</option>
  </select></div>
Copier après la connexion

CSS :

.select-style {
    border: 1px solid #ccc;
    width: 120px;
    border-radius: 3px;
    overflow: hidden;
    background: #fafafa url("image/greatwall.jpg") no-repeat 90% 50%;
    }
    .select-style select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
    color: lightblue;
    }
    .select-style select:focus {
    outline: none;
    }
Copier après la connexion

L'effet est le suivant :

Trucs et astuces pour implémenter des zones de sélection personnalisées avec CSS (exemple de code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!