12

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.

2
  • 2
    Why don't you just remove the "please select" option? And write it as a label before the select.
    – lolesque
    Commented Aug 4, 2016 at 9:12
  • Note the following: THE BROWSER WILL NOT HIDE A SELECTED OPTION. I suggest adding a default option or making sure the option to be hidden is not selected. see this fiddle: jsfiddle.net/pa6wr4bc/1
    – T3.0
    Commented Feb 3, 2021 at 17:56

7 Answers 7

7

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>

3
  • I tried that but as funny as it sounds, it wont work on my end.
    – Cain Nuke
    Commented Aug 4, 2016 at 5:33
  • did you tried with !important at end to override any other styles?
    – PalakM
    Commented Aug 4, 2016 at 5:50
  • Yes, but seems like its a PHP issue. I had tried this before asking but since it didnt work I thought it was the wrong way.
    – Cain Nuke
    Commented Aug 4, 2016 at 5:53
5

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

Or just leave the <option> empty...

5

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>
5

Here is a working pluncker for you. Change it to display:none and add select to the 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>

0
2
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;" />');
   }
    };
2
  • 1
    or else you can write in the option <option style="visibility:hidden;"></option>
    – user6458249
    Commented Aug 4, 2016 at 5:32
  • Please edit your question and add the above comment as an update. I will be more readable and understandable this way.
    – Athafoud
    Commented Aug 4, 2016 at 7:55
2

You can use media query to handle small devices and phones:

/* you can set any width you want */
@media (max-width: 400px) {
  select option:first-child {
    display: none;
  }
}
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>

Click to see Output screen

Thanks... :)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.