Unable to make first <option> invisible

Question

I have <select> and want the first parameter to be invisible, because there is not enough space for text on the mobile device, and it is still chopped off, so I decided to just disappear, but it will not work. Only with other options (on PC browsers), but not for the first. Why is this?

This is what I have 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> 

Thanks.

Answer 1

 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 the first option only on the mobile device, 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> 

Answer 2

I think you really don't need to add css for this reason. If you want the first option to be empty, delete Select .ie,

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

If you want the gap to be inside the box, even if the text is deleted, you can simply add several times to make the panel wide enough, as shown 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 the problem is that it will not work in Internet Explorer (surprise!)

Or just leave <option> empty ...

Answer 4

Here you have a working plunker. Change it to display:none and add select to CSS

OR

You can use visibility: hidden; instead of display:none in CSS

 select option:first-child { display:none; } 

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

Answer 5

 jQuery.fn.toggleOption = function(show) { jQuery(this).toggle(show); if (show) { if (jQuery(this).parent('span.toggleOption').length) jQuery(this).unwrap(); } else { if (jQuery(this).parent('span.toggleOption').length == 0) jQuery(this).wrap('<span class="toggleOption" style="display:none;" />'); } }; 

Answer 6

You can use the media query to process small devices and phones:

 /* you can set any width you want */ @media (max-width: 400px) { select option:first-child { display: none; } } 

Answer 7

  <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...:)