Cant make the first <option> invisible

Question

I have a <select> and want the first option to be invisible since there is not enough space for the text on the mobile version and it gets chopped off anyway so I resolved to just make it disappear but it wont work. Only with the rest of the options (on PC browsers) but not for the first one. Why is that?

This is what I've already tried

CSS:

option:first-child {
    color: transparent;
}

HTML:

<select>    
    <option value="">Please select</option> 
    <option value="1">1</option>    
    <option value="2">2</option>    
    <option value="3">3</option>    
</select>

Thank you.

Answer 1

 <select>
         <option style="display:none;">Please select</option> 
         <option value="1">one</option>
         <option value="2">two</option>
         <option value="3">three</option>
         <option value="4">four</option>
    </select>

Thanks... :)

Answer 2

I think you don't really need to add any css for this reason. If you need to the first option to be blank, then remove Please Select .i.e.,

<select> 
    <option value=""></option> 
    <option value="1">1</option>    
    <option value="2">2</option>    
    <option value="3">3</option>    
 </select>

If you want some spacing will be there inside the box even though text is removed you can just add   a few times to make look the panel wide enough as show below.

<select> 
    <option value="">&nbsp;&nbsp;&nbsp;&nbsp;</option> 
    <option value="1">1</option>    
    <option value="2">2</option>    
    <option value="3">3</option>    
 </select>

Answer 3

You can set it to display: none; only issue is, it won't work in Internet Explorer (surprise!)

Or just leave the <option> empty...

Answer 4

option:first-child{
	display: none;
}

<select> 
	<option disabled value>Please select</option> 
	<option value="1">1</option>    
	<option value="2">2</option>    
	<option value="3">3</option>    
</select>

using javascript (best way)

(function(){
  document.getElementById("first").text = "";
})()

<select id="mySelect"> 
  <option value id="first">Please select</option> 
  <option value="1">1</option>    
  <option value="2">2</option>    
  <option value="3">3</option>    
</select>

if you want to hide first option only in mobile, then follow this

(function(){
	var window_width = $(window).width();
	if(window_width < 480){
		document.getElementById("first").text = "";
	}
})()

<select id="mySelect"> 
	<option value id="first">Please select</option> 
	<option value="1">1</option>    
	<option value="2">2</option>    
	<option value="3">3</option>    
</select>
<p>This will hide only in mobile screen</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>