Comment insérer des images dans l'entrée avec CSS

Comment insérer des images dans une entrée en utilisant CSS : définissez d'abord l'élément enfant dans le div contenant l'entrée ; puis définissez le positionnement du div externe sur relatif, puis définissez le positionnement de l'étendue sur absolu ; Attribut margin-left à l’entrée C’est tout.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Recommandé : Tutoriel vidéo CSS

Css insérer une image dans l'entrée

Défini dans le div contenant l'élément enfant d'entrée.

<div class="search">
    <span></span>
    <input type="text">
</div>

2. Définissez le positionnement du div externe sur relatif

.search{
    position: relative;
}

3. Définissez le positionnement de l'étendue sur absolu et définissez la largeur, la hauteur et l'image d'arrière-plan

.search > span{
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(./search.png) no-repeat;
    background-size: 80% 80%;
    background-position: center;
}

4. Ajoutez l'attribut margin-left à l'entrée.

.search > input{
    width: 100%;
    padding-left: 20px;
}

5. Rendu

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!