CSS検索ボックスの書き方

CSS で検索ボックスを実装する方法: 最初にページ構造を整理し、次にプレースホルダーを使用してテキスト ボックスに注釈を付け、次に検索ボタンを設定し、最後にページのデフォルトの余白と内側の余白をリセットし、検索ボックス 外枠スタイルのみ。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS 検索ボックスを作成するにはどうすればよいですか?

図に示すように、pc css を使用して検索ボックスの効果を実現します。

分析:

1. 以下に示すように、markman を使用して元の画像の幅、高さ、色などを分析します:

2. 要素を分析します:
検索ボックス 主なコンポーネント: 入力テキスト ボックス、ボタン ボタン、ボタンの左側にある三角形のインジケーター シンボル;

実装:

• 最初にページを整理します構造:

 

   <input>      SEARCH        <span></span>             

• テキスト ボックス、プレースホルダーを使用してテキスト ボックスに注釈を付けます:

<input>

• 検索ボタン:

<button>SEARCH</button>

• 三角形インジケーター: 例から 図に示すように、この三角形シンボルはボタンと統合されているため、最初はこれをボタンの内部要素として使用し、位置決めを使用して
## を実現することにしました。 #

<button>SEARCH
  <span></span>
</button>

スタイル デザイン:

まず、ページのデフォルトの余白とパディングをリセットします:

    *{
        margin:auto;
        padding:0;
     }

スタイルを設定しますクラス フォームの:

 .form{
        width: 454px;
        height: 42px;
        background:rgba(0,0,0,.2);
        padding:15px;
        border:none;
        border-radius:5px;  
}

検索ボックスの外側の境界線のスタイルを設定し、透明度を設定し、外側の境界線を削除し、境界線のラジアンを設定します:

background:rgba(0,0,0,.2);
border:none;
border-radius:5px;

入力入力ボックスのスタイルを設定します:

input{
    width: 342px;
    height: 42px;
    background-color: #eeeeee;
    border:none;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    font-style:italic;
}

境界ラジアンも次のように省略できます:

    border-radius:5px 0 0 5px;

フォント スタイルを設定します:

    style-style:italic

その他の属性値:

#属性値#normalitalic#obliqueブラウザには斜体のフォント スタイルが表示されます。 inherit フォント スタイルを親要素から継承することを指定します。 ボタン スタイル:

説明
デフォルト値。ブラウザには標準のフォント スタイルが表示されます。
ブラウザには斜体のフォント スタイルが表示されます。

button{
    width:112px;
    height: 42px;
    background-color:#d93c3c;
    color:#fff;
    border:none;
    border-radius:0 5px 5px 0;
    position: relative;
}

ここでは相対位置が使用されていることに注意してください:

 position: relative;

関数は次のとおりです。ヘルプは三角形の位置を示します。

三角形のスタイルを示します:

 .t{
    border-width:6px;
    border-style:solid;
    border-color: transparent #d93c3c transparent transparent;
    position: absolute;
    right:100%;
}

この要素は絶対位置を使用し、その y 座標は右から左に参照されます。 % 境界位置では、X 座標が設定されていない場合、デフォルトは 0 です:

 position: absolute;
 right:100%;

三角形のインジケーター シンボルを作成する手順:

定義三角形のスパン要素:

<span></span>

4 色の境界線を作成します:

 .triangle {
    display: inline-block;
    border-width: 100px;
    border-style: solid;
    border-color: #000 #f00 #0f0 #00f;
}

border-color 4 つの値は、三角形の色を表します。上、右、下、左の境界線を順番に描きます。

[推奨学習:

css ビデオ チュートリアル

]

必要な三角形のどの方向でも、他の 3 つの三角形を透明に設定するだけです

border-color: #000 transparent transparent transparent;

スパンを使用する代わりに、疑似クラスを使用して三角形を直接配置します。次に、スパン要素と三角形のスタイルを削除し、ボタン要素のスタイルに前を直接追加します。完全なコードは次のとおりです。次のとおりです:

うーん

以上がCSS検索ボックスの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。