Survey form - CSS rule won't change the colour of the text

Right, so my project is nearly finished. Everything works but there is one annoying issue with my CSS rule. As you can see, the text of the first option (disabled) of the dropdown-select property will stay black and is making the user hard to read it as the theme is already black. I have tried to give it a class/id and then assign the white colour to the text. No matter what I am trying the text won’t change its colour. Any advice here please? :smiley:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <h1 id="title" class="text-center">Survey Form</h1>
      <p id="description">In this form we would like you to give your honest opinion about our product.</p>
    </header>
    <form id="survey-form">
      <div class="form-elements">
        <label id="name-label" for="name">Full Name</label>
        <input
          id="name"
          name="name"
          type="text"
          class="form-feedback"
          placeholder="Enter your full name"
          required
        />
      </div>
      <div class="form-elements">
        <label id="email-label" for="email">Email</label>
        <input
          id="email"
          name="email"
          type="email"
          class="form-feedback"
          placeholder="Enter your email"
          required
        />
      </div>
      <div class="form-elements">
        <label id="number-label" for="number">Age</label>
        <input
          id="number"
          name="age"
          type="number"
          class="form-feedback"
          placeholder="Age"
          min="18"
          max="100"
          required
        />
      </div>
      <div class="form-elements">
        <p>How would you best describe yourself as?</p>
        <select id="trading-status" name="trading-status" class="form-feedback" required>
          <option disabled selected value>Please select one answer</option>
          <option value="short-term">Short-term trader</option>
          <option value="long-term">Long-term trader</option>
          <option value="investor">Investor</option>
          <option value="none">None of the above</option>
        </select>
        

      </div>
      <div class="form-elements">
        <p>What is your level?</p>
        <select id="dropdown" name="status" class="form-feedback" required>
          <option disabled selected value>Please select one answer</option>
          <option value="beginner">Beginner</option>
          <option value="intermediate">Intermediate</option>
          <option value="advanced">Advanced</option>
          <option value="na">N/A</option>
        </select>
      </div>
      <div class="form-elements">
        <p>What are you favourite assets?<span class="smalltext">(multiple answer allowed)</span></p>
        <label>
          <input
            name="favourite"
            value="bitcoin"
            class="input-checkbox"
            type="checkbox"
          />Bitcoin</label>
          <label>
          <input
            name="favourite"
            value="etherum"
            class="input-checkbox"
            type="checkbox"
          />Etherum</label>
          <label>
          <input
            name="favourite"
            value="solana"
            class="input-checkbox"
            type="checkbox"
          />Solana</label>
          <label>
          <input
            name="favourite"
            value="cardano"
            class="input-checkbox"
            type="checkbox"
          />Cardano</label>
          <label>
          <input
            name="favourite"
            value="xrp"
            class="input-checkbox"
            type="checkbox"
          />XRP</label>
          <label>
          <input
            name="favourite"
            value="internet-computer"
            class="input-checkbox"
            type="checkbox"
          />Internet Computer</label>
          <label>
          <input
            name="favourite"
            value="dogecoin"
            class="input-checkbox"
            type="checkbox"
          />Dogecoin</label>
          <label>
          <input
            name="favourite"
            value="polygon"
            class="input-checkbox"
            type="checkbox"
          />Polygon(MATIC)</label>
          <label>
          <input
            name="favourite"
            value="shiba-inu"
            class="input-checkbox"
            type="checkbox"
          />Shiba Inu</label>
      </div>
      <div class="form-elements">
        <p>If you would you be given $100 bonus will you consider investing it?<span class="smalltext">(one answer allowed)</span></p>
        <label>
          <input
            name="user-choice"
            type="radio"
            value="yes"
            class="radio-choice"
            checked 
          />Yes
        </label>
        <label>
          <input
            name="user-choice"
            type="radio"
            value="possibly"
            class="radio-choice" 
          />Possibly
        </label>
        <label>
          <input
            name="user-choice"
            type="radio"
            value="no"
            class="radio-choice" 
          />Nope
        </label>
        <label>
          <input
            name="user-choice"
            type="radio"
            value="not-trading-at-all"
            class="radio-choice" 
          />I'm not trading at all
        </label>
      </div>
      <div class="form-elements">
        <p>In a few words, how do you think we can improve our product?</p>
        <textarea
          id="user-comment"
          class="textarea-choice"
          name="user-comment"
          placeholder="In a few words, how do you think we can improve our product?"
          ></textarea>
      </div>
      <div class="form-elements">
        <button type="submit" id="submit" class="submit-button">Submit</button>
      </div>
    </form>
</div>
</body>
</html>

:root {
  --color-background: #212529;
  --color-text: #000000;
  --color-lightgray: #2c2c2c;
  --color-blue: #3498db;
  --color-green: #2ecc71;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-background);
  margin: 0;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-image: url('https://img.freepik.com/free-photo/bitcoin-cryptocurrency-digital-money-golden-coin-technology-business-concept_640221-102.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.container {
  width: 100%;
  max-width: 600px;
  margin: 3rem auto 0 auto;
}

.header {
  padding: 0 1rem;
  margin-bottom: 3rem;
  text-align: center;

}

#title {
  font-weight: 400;
  font-size: 2.3rem;
  color: #98FB98;
}

#description {
  font-style: normal;
  font-weight: 500;
  color: var(--color-dark);
}

.form-elements {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-lightgray);
}

.form-feedback,
.select-dropdown,
.textarea-choice {
  display: block;
  width: 100%;
  padding: 0.75rem;
  color: var(--color-text);
  background-color: var(--color-lightgray);
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.submit-button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  color: #98FB98;
  font-size: 1.3rem;
  background-color: var(--color-lightgray);
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.form-feedback:focus,
.select-dropdown:focus,
.textarea-choice:focus {
  border-color: var(--color-blue);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}
.submit-button:focus {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  outline: 0;
}

.checkbox-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-lightgray);
}

.input-checkbox,
.radio-choice {
  margin-right: 0.625rem;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-lightgray);
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  vertical-align: middle;
}

.input-checkbox:checked,
.radio-choice:checked {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  vertical-align: middle;
}
form {
  background-color: rgba(192, 192, 192, 0.7);
  padding: 2rem;
  border-radius: 5px;
  border: 1px solid #ddd;
}

p,h1 {
  margin: 0;
  font-weight: 800;

  }

  #name-label, #email-label, #number-label{
    margin:0;
    font-weight: 800;
  }

  .smalltext {
    font-size: 12px;
    font-style: italic;
  }

  #title, #description {
    font-weight: 800;
  }

Hi @hungry-government807

In the root selectorchange the text-color variable to white (#fff).

Happy coding

1 Like

This would change the rest of the text to white which I don’t want. I’d like to look like the placeholder text in the other inputs.

Hello!

You can solve this by simply adding another CSS - variable named color-text-white: #ffffff to the root and applying it to the drop downs!

1 Like

That is absolutely brilliant, thank you! I have now also applied the colour to the placeholder text so it will match. It looks way better now.

:root {
  --color-background: #212529;
  --color-text: #000000;
  --color-lightgray: #2c2c2c;
  --color-blue: #3498db;
  --color-green: #2ecc71;
  --color-text-white: #ffffff;

}

#dropdown {
    color: var(--color-text-white);
  }

  ::placeholder {
    color: var(--color-text-white);
  }