how to Select List first Item Show Hide

Question

I need to design a selectlist whose first value (select name) will hide the span tag if it is in state. When I change the value i.e. the selectlist is changed then the Span tag will be visible above the selectlist. Again when the first value is selected (select name) the span tag will be hidden. Below is an example of input type text. I want something like this in the select list. I would appreciate it if someone could help.

<div class="text-field ">
     <input class="text-base " type="text"  placeholder=" ">
     <span>Name *</span>
   </div>
  
  </form>
  <div class= "text-field">
   
      <select class="text-base">
        <option value="0">Select Name</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
      </select>
   
      <span>Select Name</span>
    
    </div>
  
  </div> 

.text-field {
  position: relative;
  box-sizing:border-box;
  width: 80%;
  padding: 5px 5px;
  margin-bottom: 5px;
  margin-left: 15%;
 
}
.text-base {
  
  margin: 0;
  height: 1.5rem;
  padding: 5px 5px;
  border: 1px solid black;
  border-radius: 5px;
  transition: all .3s;
  width: 80%;
 background-color: transparent;

  
}

.text-base:focus {
  border: 1px solid #0074d9;
  outline: 0;


}

.text-field input {
  display: inline-block;
  padding: 5px;
}

.text-field span {
  color: black;
  position: absolute;
  pointer-events: none;
  background-color: transparent;
  left:2%;
  top: 20%;
  transition: 0.3s ;
}

.text-field input:focus+span,
.text-field input:not(:placeholder-shown)+span{
  top: -5%;
  left: 10px;
  font-size: small;
  background-color: #abb9bd;
  padding: 0 5px 0 5px;
  color: orangered;
}

.text-field input:focus:invalid+span,
.text-field input:not(:placeholder-shown):invalid+span {
    color: orangered;
}

Answer 1

selects are not inputs. try:

.text-field input:focus+span,
.text-field input:not(:placeholder-shown)+span,
.text-field select:focus+span,
.text-field select:not(:has(option[value="0"]:checked))+span 
{
  top: -5%;
  left: 10px;
  font-size: small;
  background-color: #abb9bd;
  padding: 0 5px 0 5px;
  color: orangered;
}

note: you will need to style the size of the select