Question

我们可以通过使用css / javascript代码在不触及html标签的情况下选择html输入吗？

<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 */
}

我不介意使用javascript

jsfiddle

Answer 1

您可以使用required property来使用JS。它就像标签上的required属性一样，但它是一个JS属性而不是HTML属性。

我添加了另一个<select>来演示。请尝试仅提交第二个<select>，您将看到它需要提交<select class="css-class">。

<小时/>

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

我不认为只用css是可能的，因为这只是用于样式内容。

这个答案可以为您提供解决方案：Can I apply the required attribute to <select> fields in HTML5?

他们建议的标记：

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

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

2 个答案: