カスタムセレクトフォーフォーム

7694 ワード
html css テキストリンク
こんにちはみんな、今私はカスタムフォームの選択/ドロップダウンを作成したい.
HTMLから始めましょう
<div class="wrapper">

  <label for="country">Country</label>
  <select name="country" id="country"> 
    <option value="US">United States</option>
    <option value="UK">United Kingdom</option>
    <option value="ID">Indonesia</option>
    <option value="SG">Singapore</option>
    <option value="MY">Malaysia</option>
  </select>

</div>
結果:

今すぐドロップダウンにスタイルを与えましょう.
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;700&display=swap');

* { box-sizing: border-box; }

body, html {
  padding: 0;
  margin: 0;
  font-family: 'Nunito', sans-serif;
  color: #181820;
  height: 100%;
}

.wrapper {
  height: 100%;
  padding: 2em;
  display: grid;
  place-content: center;
}
上のスタイルでは、Nunitoにフォントを設定し、要素をページの中央に置きます.

まずラベルを作りましょう.
label {
  margin-top: 1.5em;
  margin-bottom: .5em;
  font-weight: bold;
  font-size: 1.2em;
}
上記のコードから、ラベルには、フォントサイズ1.2emとフォントウェイトboldとの上下の空白があります.
結果:

今すぐドロップダウン/スタイルを選択します.
select {
  padding: 1em;
  width: 130%;
  border-radius: .2em;
  border: 1px solid #acacac;
  color: #181820;
}
結果:

あなたが見ることができるように、私は1メートルでパディングを与えた後、正確に右側に白いスペースを持っていない
これを修正するにはドロップダウンをカスタマイズする必要があります.
まず、selectの外観をNoneに追加する必要があります.
select {
  /* previous css code*/

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}
結果:

次に、backgroundでno-repeatとしてイメージからドロップダウンアイコンを追加し、sizeの周りに14px-18pxを設定します.positionに合わせてrightを設定し、originに基づいてcontent-box
select {
  /* previous css code*/

  background: url('https://cdn1.iconfinder.com/data/icons/arrows-vol-1-4/24/dropdown_arrow-512.png');
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: right;
  background-origin: content-box;
}
全文
以上です.楽しんでください.
ハッピーコーディング!!)
ギャツビーMDX:紙吹雪効果でコードボタンをコピーする
JS 009