[publishログ]21.8.30-select

8275 ワード
CSS テキストリンク
のようなボタンを押すと、上、下に選択可能なオプションが表示されているボタンを見たことがあります.
これらのボタンはselect~optionを使用して作成できます.
<div className="plugin_top">
                    <select>
                        <option value="-1">전체</option>
                        <option value="1">IBK 투자 관계망</option>
                        <option value="2">SmartBill</option>
                        <option value="3">이카운트 ERP</option>
                        <option value="4">생산자네트워크</option>
                        <option value="5">아이마켓</option>
                        <option value="6">대출</option>
                        <option value="7">정책자금</option>
                        <option value="8">전자어음할인</option>
                    </select>
                    <input type="text" id="plugin_top_input" placeholder="플러그인명 입력"/>
                    <button id="plugin_top_button">검색</button>
</div>
selectのデフォルトの矢印画像はです.一番上のselectのように矢印画像を変更したい場合は、CSSしか使用できません.
.plugin_top select {
    width: 120px;
    padding:8px;
    border-radius: 5px;
    border: 1px solid #d8d6de;
    font-size: 12px;
    color: #bebbc9;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    background: url("../image/arrowbtn.png") 95% center no-repeat;
}
selectのcssでappearanceをnoneとして指定した後、バックグラウンドでimgファイルをurlに設定する必要があります.これにより、矢印の形状を変更できます.
クリックした色を黒から別の色のcssに変更できます.
.plugin_top select:focus {
    border: 1px solid #00b9ef;
}
このようにselect:focusにstyleを指定します.
inputはfocusにもstyleを指定し、マウスクリックで枠線の色を変えることができます.
マウスにスタイルを合わせると、マウスを動かすときの枠線の色が変わることがあります.
[伯俊/C+]2005号ACM Craft
SQLの質問に答える