Comment créer un beau style de champ de recherche avec CSS ? (exemple de code)

Cet article vous présente un joli style de champ de recherche CSS. J'espère qu'il sera utile aux amis intéressés.

L'exemple spécifique de code de style de champ de recherche CSS est le suivant :

<div class="search bar">
    <form>
        <input placeholder="css搜索框代码测试" name="cname" type="text">
        <button type="submit"></button>
    </form>
</div>

Le code de style de style est le suivant :

* {
    box-sizing:border-box;
}
div.search {
    padding:10px 0;
}
form {
    position:relative;
    width:300px;
    margin:0 auto;
}
input,button {
    border:none;
    outline:none;
}
input {
    width:100%;
    height:42px;
    padding-left:13px;
}
button {
    height:42px;
    width:42px;
    cursor:pointer;
    position:absolute;
}     
.bar input {
    border:2px solid #c5464a;
    border-radius:5px;
    background:transparent;
    top:0;
    right:0;
}
.bar button {
    background:#c5464a;
    border-radius:0 5px 5px 0;
    width:60px;
    top:0;
    right:0;
}
.bar button:before {
    content:"搜索";
    font-size:13px;
    color:#F9F0DA;
}

Le champ de recherche ci-dessus L'effet du test du code CSS est le suivant :

Remarque :

Tous les principaux navigateurs prennent en charge La balise

est utilisée pour collecter des informations sur l'utilisateur. Les champs de saisie peuvent prendre plusieurs formes en fonction de la valeur de l'attribut type. Les champs de saisie peuvent être des champs de texte, des cases à cocher, des contrôles de texte masqué, des boutons radio, des boutons, etc. La balise

À l’intérieur de l’élément bouton, vous pouvez placer du contenu, tel que du texte ou des images. C'est la différence entre cet élément et les boutons créés à l'aide d'éléments d'entrée.

Si vous utilisez le bouton dans un formulaire HTML élément, différents navigateurs soumettront des valeurs différentes. Internet Explorer soumettra au lieu de texte entre les deux, tandis que d'autres navigateurs soumettront le contenu de l'attribut value. Veuillez utiliser des éléments de saisie dans les formulaires HTML pour créer des boutons.

[Articles connexes recommandés]

Css pour créer un beau champ de recherche

HTML pour implémenter un translucide flottant fixe recherche sur mobile Box

Partager 8 champs de recherche CSS3

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!