html - 下拉菜单未从选项列表中选择项目

Question

目前我的页面中有一个表单标签，其中包含不同的输入和选择标签。我的选择标签有 2 个问题。首先是由于某种原因它没有选择我要选择的任何项目。其次，我想在下拉列表中显示一个占位符，它与我表单中其他输入占位符的字体相匹配，但它显示了我的占位符，这是我在下拉列表中的第一项作为纯文本。

CodeSandbox：https ://codesandbox.io/s/quizzical-cdn-lpv8m?file=/src/App.tsx

代码：

<div class="container" style={{ backgroundColor: "#ECECEC" }}>
          <div class="row">
            <div class="col-lg-6 col-md-6 col-12">
              
            </div>

            <div class="col-lg-5 col-md-5 col-12 mx-auto">
              <form>
                <div style={{ paddingBottom: "5px" }}>
                  <div class="row">
                    <div class="col-md-6">
                      <input
                        type="text"
                        class="form-control contactInput"
                        placeholder="First Name"
                        name="fname"
                      />
                    </div>
                    <div class="col-md-6">
                      <input
                        type="text"
                        class="form-control contactInput"
                        placeholder="Last Name"
                        name="lname"
                      />
                    </div>
                  </div>
                </div>
                <div style={{ paddingBottom: "5px" }}>
                  <select
                    value="Nationality"
                    className="form-control contactInput dropdown"
                    placeholder="Nationality"
                  >
                    <option value="" readonly="true" hidden="true" selected>
                      Nationality
                    </option>
                    <option value="afghan">Afghan</option>
                    <option value="albanian">Albanian</option>
                    <option value="algerian">Algerian</option>
                    
                  </select>
                </div>
                <div style={{ paddingBottom: "5px" }}>
                      <select
                        value="Country"
                        className="form-control contactInput dropdown"
                        placeholder="Country"
                      >
                        <option value="" readonly="true" hidden="true" selected>
                      Country of Residence
                    </option>
                        <option value="Afghanistan">Afghanistan</option>
                        <option value="Åland Islands">Åland Islands</option>
                        <option value="Albania">Albania</option>
                      </select>
                    </div>
                <div style={{ paddingBottom: "5px" }}>
                  <div class="row">
                    <div class="col-md-6">
                      <input
                        type="text"
                        class="form-control contactInput"
                        placeholder="Email"
                        name="email"
                      />
                    </div>
                    <div class="col-md-6">
                      <input
                        type="text"
                        class="form-control contactInput"
                        placeholder="Phone"
                        name="phone"
                      />
                    </div>
                  </div>
                </div>
                <div style={{ paddingBottom: "5px" }}>
                  <div class="row">
                    <div class="col-md-6">
                      <input
                        type="text"
                        class="form-control contactInput"
                        placeholder="Family Situation"
                        name="email"
                      />
                    </div>
                    <div class="col-md-6">
                      <select value="Nationality"
                    className="form-control contactInput dropdown"
                    placeholder="Nationality"><option value="1">1</option></select>
                    </div>
                  </div>
                </div>
                <div style={{ paddingBottom: "5px" }}>
                  <textarea
                    class="form-control contactInput"
                    placeholder="Message"
                    rows="4"
                    name="message"
                  ></textarea>
                </div>
                <input
                  class="form-control contactInput"
                  style={{
                    backgroundColor: "#0E2043",
                    color: "#fff",
                    textAlign: "center",
                  }}
                  type="submit"
                  value="Submit"
                />
              </form>
            </div>
          </div>
        </div>

我希望它看起来像什么的参考：

标签： htmlcssreactjs

Answer 1

替换class为属性，同时从元素className中删除属性。此属性是阻止显示所选选项的原因。value<select>

第二部分的 CSS（占位符）：

/* To target all <select> */
select option[value=""] { color: #ccc }

/* To target specific E.g.: <select id="country" ...> */
select#country option[value=""] { color: #ccc }

在您的国家/地区下拉列表中添加“id”属性，如下所示：

<select id="country" ...>