使用CSS类选择所需的选项输入

Question

Can we make select option html input required without touching html tags by using css/javascript code?

<form action="?" method="post">
    <select class='css-class'>
        <option value=''>choose</option>
        <option value='1' data-key='1'>one</option>
        <option value='2' data-key='2'>two</option>   
        <input type="submit"/>
    </select>
</form>

css

.css-class select option{
    /* anything here to make it required */
}

I don't mind using javascript

jsfiddle

Answer 1

You can use JS by using the required property . It's just like the required attribute that's on tags, but it's a JS property instead of a HTML attribute.

I added another <select> to demonstrate. Try submitting only the second <select> and you'll see it'll require <select class="css-class"> to be submitted.

---

 document.querySelector('.css-class').required = true; 

 <form action="?" method="post"> <select class='css-class'> <option value=''>choose</option> <option value='1' data-key='1'>one</option> <option value='2' data-key='2'>two</option> <input type="submit" /> </select> <select class='css-id'> <option value=''>choose</option> <option value='1' data-key='1'>one</option> <option value='2' data-key='2'>two</option> <input type="submit" /> </select> </form> 

Answer 2

I don't think that it is possible with just css as this is just for styling content.

Could this answer provide a solution for you: Can I apply the required attribute to <select> fields in HTML5?

The markup they suggest:

<select required>
<option value="">Please select</option>
<option value="one">One</option>
</select>