HTML/CSS - <input> 宽度

Question

虽然对此有一些意见，但 <input> 的宽度控制问题保持开放。

此问题与 WordPress 站点有关，但可以以非常简单的形式重现。

上下文:我有一个复选框控制的 CSS 嵌套标题/文本切换系统。复选框是隐藏的，一切正常，除了我无法控制复选框的宽度。除非被覆盖，否则它大约有 14px 宽——我想要它的全 div 宽度；我无法做到这一点。 (复选框必须位于以下标题上方，因此position:absolute；)

实际checkbox不能调整大小，但它的可点击区域可以:我对点击区域宽度感兴趣。

WP 页面 HTML 是这样的(为简洁起见截断了一些位)

<div id="left-area">
<article id="post-399" class="et_pb_post ...">
    <h1></h1>
    <p class="post-meta"></p>
    <div class="entry-content">
        <div class="nested-toggle">
            <input type="checkbox" checked="">
            <h2>Heading</h2>

“左侧区域”上的主题 CSS 样式将宽度设置为 712 像素。但是，如果 <input>给定宽度:100%；它的宽度为 968 像素，不是 <div id="left-area"> 的宽度但实际上是外部的(由 div.container {...} 设置宽度 = 968px)。

可以使用以下最小示例重现效果

<div class="leftside">
  <input type="checkbox" checked><i></i>
  <h2>a Heading</h2>
</div>

有样式

div.leftside {width:900px;}
input[type="checkbox"] {
    position: absolute;
    width: 50%;
}

这一切都是用 Firefox(当前版本)完成的，并且在 codepen.io 上检查了最小的例子。

我(又)对此比较陌生；我是不是做了什么蠢事？

出了什么问题，我该如何设置 <input>有合适的宽度？

谢谢!

PS FF 或 WP 之一好像加了</input>在我的<input>之后;从技术上讲，这似乎是无效的 HTML，因为它在 W3C 验证时会导致错误，但它似乎不会影响呈现行为。

Answer 1

如果我答对了你的问题，那么 Julian Moore 的可点击标签是正确的......

这是一个更新的 fiddle (最初发布与以下条目 How to create an HTML checkbox with a clickable label 相关)

http://jsfiddle.net/qYZFJ/1283/

HTML:

<label><input type="checkbox" /><h2>Option 1</h2></label>
<label><input type="checkbox" /><h2>Option 2</h2></label>
<label><input type="checkbox" /><h2>Option 3</h2></label>

CSS:

label {
 border:1px solid #ccc;
 margin:0 0 10px;
 display:block; 
}
label:hover {
 background:#eee;
 cursor:pointer;
}
label>input[type=checkbox] {
    display: none;
}
label>input[type=checkbox] + h2 {
    background: #f2d4d4;
    display: block;
    padding:10px;
}
label>input[type=checkbox]:checked + h2 {
    background: red;
}

编辑:

这是另一个显示纯 css/html 文本切换系统的 fiddle ...

http://jsfiddle.net/qjLguro9/2/

HTML:

  <label class="toggle" for="chkShow1">Show first element</label>
  <input id="chkShow1" type="checkbox">
  <div>Lorem Ipsum ... however, this is the first content</div>

  <label class="toggle" for="chkShow2">Show second element</label>
  <input id="chkShow2" type="checkbox">
  <div>This is the second content ;)</div>

CSS:

.toggle{
  font-size: 16px;
  display: block;
  width: 150px;
  border: 1px solid gray;
}
.toggle + input{
  display:none;
}
.toggle + input + *{
  display:none;
  margin-bottom: 4px;
}
.toggle+ input:checked + *{
  display:block;
}