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? 
<!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;
}
