html怎么隐藏option

86 阅读 0 评论 57 点赞

我是靠谱客的博主奋斗秀发，最近开发中收集的这篇文章主要介绍html怎么隐藏option，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

html隐藏option的方法

方法1：给option标签设置hidden属性

浏览器不应显示已规定 hidden 属性的元素。

<select>
  <option>默认---喜欢什么水果</option>
  <option hidden="hidden">苹果</option>
  <option>梨子</option>
  <option>桃子</option>
  <option>香蕉</option>
</select>
登录后复制

方法2：给option标签添加“display:none”样式

<select>
  <option>默认---喜欢什么水果</option>
  <option hidden="hidden">苹果</option>
  <option style="display: none;">梨子</option>
  <option>桃子</option>
  <option>香蕉</option>
</select>
登录后复制

方法3：给option标签添加“visibility:hidden”样式

<select>
  <option>默认---喜欢什么水果</option>
  <option hidden="hidden">苹果</option>
  <option style="display: none;">梨子</option>
  <option>桃子</option>
  <option style="visibility: hidden;">香蕉</option>
</select>
登录后复制