How to prevent user from picking default value from dropdown in css?

Question

I have a form in which I have added "Please Select" option for the drop-down.

The form should work in a way that if users doesn't select values 1, 2-5, 6-15, 16-30 etc then the form should not submit.

In my form, if I select "Please Select" then the form gets submit as it being treated as 1, 2-5, 6-15, 16-30, etc.

The HTML codes for the form generated at run time are:

 <select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" aria-required="true" aria-invalid="false">
   <option value="Please Select" selected="selected">Please Select</option>
   <option value="1">1</option>
   <option value="2-5">2-5</option>
   <option value="6-15">6-15</option>
   <option value="16-30">16-30</option>
   <option value="31-100">31-100</option>
   <option value="101-250">101-250</option>
   <option value="251-1000">251-1000</option>
   <option value="1001-2500">1001-2500</option>
   <option value="2501 +">2501 +</option>
</select>

Problem Statement:

I am wondering what changes I should make in the HTML code above so that "Please Select" option is not treated as other drop-down values (1, 2-5, 6-15, 16-30 etc ) in the HTML.

Possible duplicate of [Make some options in a select menu "unselectable"](https://stackoverflow.com/questions/17316540/make-some-options-in-a-select-menu-unselectable) — takendarkk, Jun 04 '18 at 20:11
Do you still want the form to be submitted if the default option is selected, or do you want the form validation to prevent it from being submitted? — Chase Ingebritson, Jun 04 '18 at 20:12
@Chase Ingebritson The default option should always be "Please Select" and yes it should not be treated as other drop-down values. So form validation on it will be great. — flash, Jun 04 '18 at 20:15
You can try with empty string value for please select option. — Rahul R., Jun 04 '18 at 20:16
Possible duplicate of [Prevent user from picking the default value in a dropdown menu](https://stackoverflow.com/questions/9570478/prevent-user-from-picking-the-default-value-in-a-dropdown-menu) — Peter B, Jun 04 '18 at 20:17
@PeterB I have edited my question. Is there any way, we can disable through CSS ? — flash, Jun 04 '18 at 20:52
No, the answer by *Chase Ingebritson* states all the options that there are. CSS is used to style things (how they look), and offers nothing like logic or behaviour or validation. — Peter B, Jun 04 '18 at 21:07

Chase Ingebritson · Answer 1 · 2018-06-04T20:59:56.740

To force form validation on a select input, you need to use the required attribute on your select form and set the value of the initial option to "".

Note: aria-required="true" works fine as well, especially for browsers that don't yet support HTML5, I just prefer the shorter HTML5 alternative. This also applies to selected="selected" vs selected.

<form>
  <select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" required aria-invalid="false">
    <option value="" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2-5">2-5</option>
    <option value="6-15">6-15</option>
    <option value="16-30">16-30</option>
    <option value="31-100">31-100</option>
    <option value="101-250">101-250</option>
    <option value="251-1000">251-1000</option>
    <option value="1001-2500">1001-2500</option>
    <option value="2501 +">2501 +</option>
  </select>
  <button type="submit">Submit</button>
</form>

Edit: This can also be done via Javascript.

// Obtain our form via its ID
var form = document.querySelector('form');

// Add a listener to our form to wait for its submission
if (form.addEventListener) {
  form.addEventListener("submit", validate, false); //Modern browsers
} else if (form.attachEvent) {
  form.attachEvent('onsubmit', validate); //Old IE
}

function validate(e) {
  var select = e.target.querySelector("select");
  
  // Get the value of our selected option
  var selectedOption = select.options[select.selectedIndex].value;
  
  // Compare the value of the default option to the selected option
  if (selectedOption === "Please Select") {
    // Trigger Error and prevent the form submission
    alert("Please select an option!")
    e.preventDefault();
  }
}

<form>
  <select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" aria-required="true" aria-invalid="false">
    <option value="Please Select" selected="selected">Please Select</option>
    <option value="1">1</option>
    <option value="2-5">2-5</option>
    <option value="6-15">6-15</option>
    <option value="16-30">16-30</option>
    <option value="31-100">31-100</option>
    <option value="101-250">101-250</option>
    <option value="251-1000">251-1000</option>
    <option value="1001-2500">1001-2500</option>
    <option value="2501 +">2501 +</option>
  </select>
  <button type="submit">Button</button>
</form>

The HTML code which I have mentioned is coming from run time. Is there any way we can do through css ? — flash, Jun 04 '18 at 20:59
I've updated my answer with an example of how to do this via just Javascript. This cannot be done via CSS however. — Chase Ingebritson, Jun 04 '18 at 21:00

score -1 · Answer 2 · answered Jun 04 '18 at 22:06

To simply prevent the users from selecting an option just add disabled in the html for the option (as pointed out in the question from the comment marking this as a possible duplicate, @csmckelvey).

However, you can also simply add a display:none to the option:

select option:first-of-type{
    display:none;
}

At least works on android, and yet show the text of the first option (even though it Should be hidden - dont Know why).

Anyways it's important to Remember to validate the form as the other answer suggests.

How to prevent user from picking default value from dropdown in css?

2 Answers2