html 按钮 隐藏作用

可以使用js来实现按钮和文本的显示隐藏。

1创建一个新的html文档，在body标签中添加span标签和按钮标签，并为每个标签设置一个id：

2添加脚本标记并向脚本标记添加按钮单击事件。如果按钮的内容为“隐藏”，则文本将被隐藏，按钮内容将转换为“显示”：

3如果按钮内容不是“隐藏”，将显示文本，按钮内容将“隐藏”：

内容溢出时是否隐藏是指插件的内容高度和宽度如果超过插件指定的范围时如何处理。

对于大多数全局插件，如：文章列表，内容的高度是可以预知的，应该设置为“内容溢出时隐藏”使版面整齐。而检索，搜索，文章正文等插件的高度是不可预知的，应该设置为“内容溢出时自动增加高度”，使页面能自动处理高度。

当插件设置为“内容溢出时隐藏”时，插件是可以任意定位和重叠摆放的。而当内容溢出时自动增加高度时，凡是和这个插件重叠的插件会被自动放到这个插件的下方，而不在预先指定的位置。当内容小于指定高度时，也会自动缩小高度，以免页面留出太大空白区域而影响美观。

“内容溢出时自动增加高度”的选择只能在必须这样设置时使用，以免使排版效果和预期不一致。插件是否适用“内容溢出时自动增加高度”一般都是预设好的，一般不要改变这项设置。

上一页1下一页

只是一点提示，如果你仍然想要使用所有浏览器对无线电和复选框的本机支持，比如用↑和↓键在它们之间移动，将css设置为position:fixed;opacity:0，这将保留所有功能但保持输入隐藏，不会占用任何布局空间。我花了最后3个小时搞清楚这一点，但它确实有效！
答案 1 :(得分：15)
除了Nathan Lee的回答
input[type="radio"]:checked{
visibility:hidden;
}
是指定已选中单选按钮的选项
input[type="radio"][value="text"]:checked{
visibility:hidden;
}
是一个指定已选中单选按钮的选项，其值等于'text'(示例中为'none')
答案 2 :(得分：6)
尝试visibility:hidden;这会有效。
HTML：
CSS：
inputchecked[type="radio"]{visibility:hidden;}
我希望这就是你要找的东西。
答案 3 :(得分：5)
如果你想多次隐藏一个复选框/收音机，那就是制作一个自定义的复选框/收音机。
如果您希望能够专注于输入的标签，请使用opacity：0;位置：绝对的;宽度：0;这使得输入在不占用空间的情况下不可见。
如果你使用display：none;或能见度：隐藏;它会有类似的效果，但目前最常用的浏览器(MSIE11，Edge，Chrome 6003112101，Firefox 55)不允许使用键盘来关注元素，这使得它不易访问。
＆＃13;
＆＃13;
opacity {
position: absolute;
opacity: 0;
width: 0;/ for internet explorer /
}
visibility {
visibility: hidden;
}
nodisplay {
display: none;
}
input[type=checkbox]+label {
font-weight: normal;
}
input[type=checkbox]:checked+label {
font-weight: bold;
}
input[type=checkbox]:focus+label {
border: 1px dotted #000;
}＆＃13;
Press space to (un)check
Press space to (un)check
Press space to (un)check
Press space to (un)check
Press space to (un)check
Press space to (un)check
＆＃13;＆＃13;＆＃13;
答案 4 :(得分：1)
尝试使用:checked选择器：
input[type="radio"]:checked {
display: none;
}
答案 5 :(得分：1)
如果您使用过{display：none;}并且仍然看到一个空格(如3px左右)，那么很可能您的html中的元素之间有空格或换行符，有时会导致渲染器在这些元素之间显示一些像素。
这确实存在问题，如果没有这方面的知识就很难确定问题，但是一旦你知道，你有两个简单的解决方案：
要么删除html中代码之间的空白区域。 (不幸的是，这会使你的html变得更加混乱，所以第二种选择可能会更好。)
或者，在您的css中，将父容器中的font-size设置为0px。
例如：#parent{font-size:0px;}然后再次为#parent {font-size:initial;}的父级的所有孩子初始化它。
醇>
#parent{
font-size:0px;
display:block;
}
#parent {
font-size:initial;
}
tab-label {
display:inline-block;
background: #eee;
border: 1px solid;
}
[name="tab-group-1"] {
display: none;
}
Tab One
Tab Two
Tab Three
答案 6 :(得分：0)
除了其他答案中提到的问题(特别是可访问性问题)之外，display: none的一个警告是，当无线电输入为required时，它还会影响浏览器显示的警告，并且用户没有检查它。
另一方面，opacity: 0和visibility: hidden的一个警告是，单选按钮仍会占用一些空间(而AFAICS width: 0px无效)可能是问题(例如，是否对齐，或者您的单选按钮是否位于
标签内，并且您希望上的:hover背景颜色发生变化，在这种情况下，标签必须覆盖{ {1}}。
一种解决方法是将单选按钮的
设置为position。
fixed
input[type=radio] {
opacity: 10;
position: fixed;
}
input[type=radio]+label {
background-color: #eee;
padding: 1em;
}
如摘要所示(使用
radio1
radio2而不是0只是为了了解我们在说什么)，使用opacity: 10的单选按钮不再影响标签。
相关资源：纯css3单选框和复选框样式美化效果_css单选框美化-其它代码类资源
打开CSDN，阅读体验更佳
菜单、文本域、字段集_陌一一的博客_css单选框和复选框
cols控制的是文本域的列能输入几个字符宽度,rows控制的是行能输入几行,因为这个能输入多少个字符受字体大小和字体类型影响,所以我们一般不这么设置行和列,我们一般是用css设置,还有一个属性是placeholder,就是文本域提示符,属性值不是真
继续访问
使用纯CSS实现内容的显示隐藏(可用于响应式手机端菜单栏的显示)
initial-scale=10"> 纯CSS实现点击显示隐藏 / 在手机端正常的 *** 作是默认隐藏,点击菜单的时候显示 / div { display: none; } / 当单选框被选中的时候显示兄弟元素div / #btn:checked~div { display: block; } / 设
继续访问
jQuery/CSS显示或隐藏元素
1 CSS分别有display、visibility两个样式可以用于隐藏或显示HTML元素 1) display样式有多个类型的值可选择，默认值为inline，隐藏后会释放元素所占用的页面空间（详见：点击打开链接） style="display: none;" documentgetElementById("div1")styledisplay="none";//隐藏
继续访问
js input radio点击事件
html代码： <input type="radio" name="myname" value="1" />1 <input type="radio" name="myname" value="2" />2 js代码： // 点击事件change $('input[type=radio][name=myname]')change(function (
继续访问
CSS修改html单选框radio样式_AuGnIk的博客_单选框样式修改
采用剪切的方式,让剪切后的尺寸为零,以此隐藏原来的单选框。 3、用伪元素作为新的单选框: / 未被选中的单选框样式 空心圆圈/input[type="radio"] + label::before{content:'';display:inline-block;vertical-align:middle;width
继续访问
CSS 隐藏+对齐+表单篇_believealone的博客
同组的设置相同的name value属性 选框的值 checked属性 让某个单选框默认处于选中态 16 多选框 type=checkbox value属性 表示选框的值 多选框因为可能会同时选择多个值, 所以name属性需要注意: 可以name值不同 如果name值想要起成相同
继续访问
最新发布 前端 -- 单选框内容影响复选框的隐藏与显示 附代码
在网页中这类问题比较常见通过选择一个复选框或者下拉框的内容来改变另外一个复选框或者下拉框的内容（一个选项影响另外一个选项）以下内容主要做一个知识点的探讨，类似功能大同小异。
继续访问
我在使用Css控制 button 按钮显示与隐藏遇到的问题。
Css :hover选择器遇到的一些问题
继续访问
纯css控制文字显示隐藏_啊呀阿荼的博客_css点击显示隐藏
纯css控制文字显示隐藏 用到css 伪类 :checked :checked选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。 html 更多 收起 文字文字文字文字文字文字
继续访问
单选框radio控制div的显示和隐藏_知否技术的博客
css({"display":"none"}); $("input[type=radio][name='dateType']")change(function(){ var v = $(this)val(); if (v =="1"){ $("#limit")hide(800); }else{ $("#limit")show(800); } });
继续访问
CSS 实现div显示或隐藏的三种方法（display 和 visibility的区别）
一、使用CSS的 display 属性来隐藏或显示div： display 属性规定元素应该 生成的框的类型，可以通过 display：none 来隐藏某一元素。 style="display: none;" documentgetElementById("typediv1")styledisplay="none";//隐藏 documentgetElementById("typediv1
继续访问
按钮、元素的显示/隐藏
Eayui的按钮显示/隐藏 这种写法是不占用原有位置 // 隐藏 $('#saveBtn')hide(); // 显示 $('#saveBtn')show(); display：元素的位置不被占用 //display 不占用位置 // 隐藏 $("#saveBtn")css("display", "none") // 显示 $("#saveBtn")css("display", ""); // diaplay 原始写法 //隐藏 documentgetElement
继续访问
点击一个单选框时另外一个单选框里的内容属性隐藏掉_使用纯CSS制作一个
首先,我们先了解下什么是 CSS Checkbox Hack CSS Checkbox Hack 允许你通过复选框(Checkbox)是否选中(或单选按钮radio buttons)来控制某些特定的样式。这里运用的是:checked 伪类选择器,其意思就是”如果选中了表单(复选框、单选按钮
继续访问
单选框样式/自定义单选框/改变单选框border颜色/css单选框
1、首先将原先的单选框隐藏掉。 2、利用label:before 在label的前面加一个元素来模拟单选框的样式。 3、利用:checked css选择器将选中的单选框单独设置样式。 4、具体样式自根据项目手动设置比较灵活。
继续访问
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、​ 三级菜单制作、选项卡制作——css3知识点总结
一、css3新增选择器 1、兄弟选择器 相邻兄弟选择器 E + F { } 紧挨选择器E后的那个兄弟选择器F / 相邻兄弟选择器，该代码意思是选择紧邻div后的那一个span元素，且只有第一个span会被选中。 / div+span{ color: pink; } 通用兄弟选择器 E ~ F{ } 选择器E后的所有的兄弟选择器F / 通用兄弟选择器，选择所有div元素后面的span元素 / / 一对
继续访问
用 CSS 隐藏页面元素的 5 种方法
用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为absolute 然后将位置设到不可见区域。 你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果？每一种方法实际上与其他方法之间都有一些细微的不同，这些不同决定了在一个特定的场
继续访问
css 隐藏元素的方法
占据位置，会被子继承，设置visibilityvisible可以显示子元素，重绘，不会触发绑定事件。占据位置，会被子继承，但是设置opacity1,子元素不会显示，会触发绑定事件。不占据位置，触发回流，不会被子元素继承，不会触发绑定事件。绝对定位，使它偏移可视区域。
继续访问
热门推荐 单选框radio控制div的显示和隐藏
通过鼠标单击单选框的动作，实现某个div或多个div的显示和隐藏。实例如下： function divClick(){ var show=""; var apm = documentgetElementsByName("AdPrintMode"); for(var i=0;i<apmlength;i++){
继续访问
css去除单选按钮的圆点,CSS3带圆点游动动画的自定义单选框
CSS语言：CSSSCSS确定checkable-group {background: white;border: 2px solid black;border-radius: 16px;margin: 0 auto;position: relative;width: 80%;}label {border-bottom: 1px solid black;display: block;paddin
继续访问
html css 隐藏和显示按钮
html 隐藏和显示按钮 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <!--display:block:显示按钮--
继续访问
去掉radio单选按钮的默认样式
在实际项目中radio单选按钮的默认样式是很讨厌的 很多地方用了跟主色调不一样很突兀 我在网上查了查自己改了一个 <dd> <label> <input type="radio" checked="checked" name="classId" class="radio" value="1"> 商品咨
继续访问
关于单选框的css和css控制显隐
<label class="edf-line" for="z"> <input type="radio" name="pay-radio" value="2" id="z" class="st-one"> <i class="checkbox_ico"></i>
继续访问
两个单选按钮,点击其中一个隐藏或显示其他的div
HTML代码 <div class="am-u-sm-9 am-u-end"> <input type="radio" onClick="return diva()" class="tpl-form-input" name="article[activity_publish]" value="1" checked="checked";>手动发布 <i
继续访问
css 隐藏按钮_CSS3隐藏的社交按钮
css 隐藏按钮 Today we'll be looking at some very simple techniques using CSS3 transforms to make social link buttons Usually you'll see these links all over a site sitting there making a site look ugly
继续访问
css 单选框隐藏
css设置按钮隐藏
写评论
评论
收藏
点赞
踩
分享

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <style>
  input{
   position: absolute;
   left: -9999px;
  }
 </style>
 <body>
  <input type="radio" name="sex" id="sex" value="man" />男人
  <input type="radio" name="sex" id="sex" value="women" />女人
 </body>
</html>

方法/步骤

在清除之前，首先需要知道这个小黑块是什么，有什么用，是怎么添加上去的，让我来告诉你吧，这个小黑块其实是项目符号，项目符号放在文本（如列表中的项目）前以添加强调效果的点或其他符号，即在各项目前所标注的符号。

然后了解一下项目符号怎么添加和修改，将文字编辑光标到段首，或者选定全部段落，点击鼠标右键，在下拉框中选择“项目符号和编号”。

然后在“项目符号和编号”窗口中选择项目符号栏目，然后选择窗口上的符号或者自定义符号，确定后小黑块就出现了。

然后就说一下取消项目符号的方法，如果是word文档每一行的黑方块，那么原因就是格式已经被记录了，也就是说你只要按Enter键到下一段就会自动出现该黑方块。取消方法是全选文字，右键下拉框中选择“项目符号和编号”，然后选择项目符号下的“无”，然后确定就可以取消了。

还有一种方法就是清楚这部分段落的格式，将这段文字全选，然后复制，然后再黏贴，就会出现小按钮提示黏贴带什么格式的文本，选择“无格式文本”就可以了。

单选框和复选框通常是默认有样式，不能随意控制。

单选框和复选框通常改变样式的方法有两种：

使用<label>标签包含着单选（或复选）和一个单选样式的小，使用定位方法，让定位到单选框之上，点击的时候，使用javascript切换，达到选中和不选中效果，也就是两个的切换，<label>会让真正藏在下面的复选框选中和不选中。这种方法能解决大部分复选框或者单选框的样式问题。

使用非单选框复选框的标签，也就是用其它标签定义样式，使用javascript模拟点击的时候标签的样式切换，不过这种方法需要为表单提交的时候提供参数。

使用样式修改，比如border或者透明度等等，但是能修改的样式有限，例如单选框和复选框的大小无法修改，所以这种方法局限性最大，通常效果不太理想。

<script>
  function T(v){
   var arr = [];
   for(var i=0;i<fmcklength;i++){
    if(fmck[i]checked){
     arrpush(fmck[i]);
    }
   }
   for(var i=0;i<arrlength;i++){
    arr[i]styledisplay=v;
   }
  }
</script>
<form id="fm">
<input type="checkbox" name="ck" value="0" />
<input type="checkbox" name="ck" value="1" />
<input type="checkbox" name="ck" value="2" />
<input type="checkbox" name="ck" value="3" />
<input type="checkbox" name="ck" value="4" />
<input type="button" value="hide" onclick="T('none')" />
<input type="button" value="show" onclick="T('')"/>
</form>

---