CSSで見栄えの良い検索ボックスのスタイルを作成するにはどうすればよいですか? (コード例)

この記事では、見栄えの良い CSS 検索ボックス スタイルを紹介します。興味のある友人に役立つことを願っています。

CSS 検索ボックス スタイル コードの具体的な例は次のとおりです:

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

style スタイル コードは次のとおりです:

* {
    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;
}

上記の検索ボックス CSS コードのテスト効果は次のとおりです:

注:

すべての主流ブラウザは タグをサポートします。

タグはユーザー情報を収集するために使用されます。入力フィールドは、type 属性の値に応じてさまざまな形式を取ることができます。入力フィールドには、テキスト フィールド、チェックボックス、マスクされたテキスト コントロール、ラジオ ボタン、ボタンなどがあります。

タグはボタンを定義します。ボタン要素内には、テキストや画像などのコンテンツを配置できます。これが、この要素と input 要素を使用して作成されたボタンの違いです。

HTMLフォームのボタンを使用する場合 要素を使用する場合、ブラウザーが異なれば送信される値も異なります。 Internet Explorer は を送信します。 他のブラウザは value 属性の内容を送信します。ボタンを作成するには、HTML フォームの input 要素を使用してください。

【おすすめ関連記事】

見栄えの良い検索ボックスを作成するCSS

モバイル側に固定のフローティング半透明検索ボックスを実装するHTML

8つのCSS3検索ボックスを共有する

以上がCSSで見栄えの良い検索ボックスのスタイルを作成するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。