CSSでセレクトボックスのデザインをこのようにしたいです。

Question

現在、セレクトボックスのデザインをしております。
完成画像のようにするにはどのようにすればよいのでしょうか？

どなたかご教授いただけないでしょうか。
よろしくお願いいたします。

現在

完成

form.html

 <tr>
          <td class="inquiry">血液型</td>
          <td class="blood-td"><select name="blood" class="blood">

                        <option value="A型">A型</option>
                        <option value="B型">B型</option>
                        <option value="O型">O型</option>
                        <option value="AB型">AB型</option>

                        </select>
          </td>
        </tr>

style.css

.name, .sex, .blood, .contact {
  margin-left: 30px;
}

.blood {
  padding: 4px 8px;
}

*コードは街頭部分のみ

Answer 1

ドロップダウンボックスの形は、OS・ブラウザによって違ってきます。<select>を使うままで、ボタンまで厳密に揃えるのは無理です。

Comments

[dog57]

ありがとうございます。