Dropdown not picking items from the options list

Currently I have a form tag in my page that contains different input and select tags. I have 2 problems with my select tag. First is that for some reason it does not pick any of the items that I’m trying to select. And second, I want to show a placeholder on the dropdown which matches the font of the other input placeholders in my form, but it shows my placeholder which is my first item in the dropdownlist as a plain text.

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

Code:

<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>

Reference of what I want it to look like:

enter image description here

Answer

Replace class with className attribute, also remove the value attribute from your <select> element. This attribute is what is preventing the selected option to be displayed.

CSS for the second part (placeholder):

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

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

Add an “id” attribute to your country dropdown like below:

<select id="country" ...>