I have a select box in a react app. I did not use react select, I just built it out myself in jsx. I have a disabled option that says "Choose an option". I would like this to be a grey color like the other placeholders in the form. It's grey when you open up the select options, but when youre looking at the form itself before handling it, its black text. Can anyone help me change this color?

Here's the jsx

import React from 'react'

export default function BlogPostForm () {
    const [formState, setFormState] = React.useState({ flaire: '', title: '', text: ''});

    function changeFlaire(event) {
        const selectedFlaire = event.target.value;
        setFormState( {...formState, flaire: selectedFlaire });
    }

    function changeTitle(event) {
        const title = event.target.value;
        setFormState( {...formState, title: title });
    }

    function changeText(event) {
        const text = event.target.value;
        setFormState( {...formState, text: text });
    }
    
    return (
        <form className="postForm">
            <h1 className="postFormHeader">Create a blog post!</h1>           
                <select
                    required
                    className="flaireSelect" 
                    value={formState.flaire}
                    onChange={changeFlaire}>
                        <option disabled={true} value="">Choose a flaire</option>
                        <option value="JavaScript">JavaScript</option>
                        <option value="CSS">CSS</option>
                        <option value="HTML">HTML</option>
                        <option value="REACT">REACT</option>
                        <option value="BACKEND">BACKEND</option>
                </select>
                <input
                    value={formState.title}
                    onChange={changeTitle}
                    className="titleBox"
                    placeholder="title"
                    type="text"
                    id="title"
                    name="title"
                />
                <textarea
                    value={formState.text}
                    onChange={changeText}
                    className="textBox"
                    placeholder="text"
                    type="text"
                    id="blogPost"
                    name="blogPost"
                />
                <div className="blogPostFormButtonContainer">
                    <button className="blogPostSubmit" type="submit">SUBMIT</button>
                    <button className="blogPostCancel" type="submit">CANCEL</button>
                </div>
        </form>
    )
}

Here's the CSS

/*blogPostForm */
.postForm {
  font-family: "Montserrat", sans-serif;
  color: white;
  background-color: var(--color2);
  border-radius: 10px;
  margin-top: 10px;
  width: 80%;
  max-width: 750px;

  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "flaire"
    "title"
    "post"
    "buttons";
  grid-gap: 5px;
}

.postFormHeader {
  justify-self: center;
}

.flaireSelect {
  font-family: "Montserrat", sans-serif;
  justify-self: center;
  width: 150px;
  height: 35px;
  text-align: center;
}

.titleBox {
  font-family: "Montserrat", sans-serif;
  height: 40px;
  margin: 10px;
}

.textBox {
  font-family: "Montserrat", sans-serif;
  height: 100px;
  margin: 10px;
  resize: vertical;
}

.blogPostFormButtonContainer {
  font-family: "Montserrat", sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-bottom: 10px;
}

.blogPostSubmit {
  font-family: "Montserrat", sans-serif;
  width: 35%;
  margin: 5px;
  height: 35px;
}

.blogPostCancel {
  font-family: "Montserrat", sans-serif;
  width: 35%;
  margin: 5px;
  height: 35px;
}

CodePudding user response：

I'm not sure what you mean by saying: "when youre looking at the form itself before handling it, its black text". But assuming that you want that option (disabled with empty value) always to be grey, simple css rule should do the job:

select:invalid{ color: 'grey' };

You could also try:

select[disabled]{ color: 'grey' };

but that is not working in all browsers.

CodePudding user response：

My idea is to have the select color grey at first and onchange to remove this grey class:

let select = document.querySelector('.flaireSelect');
    
    function changeColor() {
        this.classList.remove('grey');
    }
    
    select.addEventListener("change", changeColor);

.flaireSelect {
        background-color: #fff;
        color: black;       
    }
    .flaireSelect option:disabled {
        color: grey;
    }
    .flaireSelect option:enabled {
        color: black;
    }
    .flaireSelect.grey {
        color: grey
    }  

<select >
  <option disabled selected>--Choose a flaire--</option>
  <option value="JavaScript">JavaScript</option>
  <option value="CSS">CSS</option>
  <option value="HTML">HTML</option>
  <option value="REACT">REACT</option>
  <option value="BACKEND">BACKEND</option>
</select>