HTML / CSS - <input> 寬度

Question

雖然有一些輸入，但<input>的寬度控制問題仍然存在。

此問題涉及WordPress站點，但可以以非常簡單的形式重現。

上下文：我有一個復選框控制的CSS嵌套標題/文本切換系統。 該復選框是隱藏的，一切正常，但我無法控制復選框寬度。 除非被覆蓋，它的寬度大約為14px - 我希望它的寬度為div; 我無法做到這一點。 （復選框必須位於以下標題上，因此position：absolute;）

實際的復選框無法調整大小，但它的可點擊區域可以是：我對點擊區域寬度感興趣。

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樣式將寬度設置為712px。 但是，如果給出<input>寬度：100％; 它的寬度為968px， 不是 <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> <input> ; 從技術上講，這似乎是無效的HTML，因為它在W3C驗證時會導致錯誤但它似乎不會影響渲染行為。

Answer 1

css3 @media規則

您可能還需要查看CSS3 @media Rule 。

通過運行代碼段，單擊整頁按鈕，然后調整窗口大小，您將看到該框對頁面寬度的響應。

當頁面寬度超過500px時，div的寬度保持在400px。

但是當頁面低於500px時，div的寬度變為100px。

檢查你的css樣式表是否有@media規則!!!

 #tricolore { background-color: green; width: 400px; height: 50px; } @media screen and (max-width: 500px) { #tricolore { background-color: red; width: 100px; height: 50px; } } 

 <div id="tricolore"></div> 

---

新答案

正如我們所說，沒有辦法調整復選框的大小，但你可以調整它的標簽。

我們可以在標簽內使用div來為我們的標簽提供尺寸。

使用我的示例檢查以下代碼段：

 #myDiv{ width:550px; height:90px; background-color:red; } #myInput{ /* display:none; */ } 

 <label> <div id="myDiv"> Text <input id="myInput" type="checkbox" name="something" value="something"> Text </div> </label> 

和你最小的例子（忽略紅色背景）的片段。

 #myDiv{ background-color:red; } #myInput{ /* display:none; */ } div.leftside {width:900px;} input[type="checkbox"] { position: absolute; width: 50%; } 

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

---

老答案

如果您嘗試更改Box大小，我認為無法通過更改輸入的width屬性來更改它。 這是你想要做的嗎？

或者你想在H2附近設置CheckBox？

<h2><label for="a">Header</label> <input type="checkbox" name="header" id="a" value="Header" checked></h2>

這有幫助嗎？

https://jsfiddle.net/ysfbww7r/4/

也嘗試這個。

你需要標題嗎？

Answer 2

如果我的問題正確，朱利安摩爾的可點擊標簽就是正確的......

這是一個更新的小提琴（最初發布與以下條目相關如何創建帶有可點擊標簽的HTML復選框 ）

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文本切換系統的小提琴......

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;
}