在懸停或顯示期間隱藏/顯示的標籤內的複選框定位

我只想在相應的標籤懸停或選中時才顯示覆選框。這很簡單，但我很難將定位標籤的文字的方式設置爲在複選框顯示時不會跳到右側。在懸停或顯示期間隱藏/顯示的標籤內的複選框定位

label input[type=checkbox] { 
 
    display: none; 
 
} 
 

 
label:hover input[type=checkbox], input[type=checkbox]:checked{ 
 
    display: inline; 
 
}

<label> 
 
    <input type="checkbox"> 
 
    text 
 
</label>

來源

2016-04-21 Sven

是否要標籤不移動並將複選框顯示在右側？剩下？淡出標籤並淡入複選框？ –

@BenSewards複選框位於標籤的左側，淡入/淡出可稍後添加，但僅限於複選框。 – Sven

正在將結帳右側的選項？那隻會讓它出現而不會碰你的文字 –

也許你可以使用visibility屬性而不是顯示。

<!doctype html> 

<head> 
<style> 
    label input[type=checkbox] { 
     visibility: hidden; 
    } 

    label:hover input[type=checkbox], 
    input[type=checkbox]:checked { 
     visibility: visible; 
    } 
</style> 
</head> 

<body> 
    <label> 
     <input type="checkbox"> text 
</label>

來源

2016-04-21 13:32:17 balkhanguk

謝謝，完全忘了該屬性.. – Sven

簡單的辦法是先插入您的文本，然後複選框。添加CSS來美化它。

<label> 
    text 
    <input type="checkbox"> 
</label>

來源

2016-04-21 13:25:58

但是如果他想先把複選框放在那裏呢？ –

然後更新你的CSS，在文本前添加一些邊距。 –

標籤輸入[type = checkbox] { display：none; position：absolute; } 標籤跨度{ margin-left：20px; } label：hover input [type = checkbox]，input [type = checkbox]：checked { display：inline; } 文本 –

您可以使用顯示器的可視性就地下面每一樣爲：

<style> 
    label input[type=checkbox] { 
     visibility: hidden; 
    } 

    label:hover input[type=checkbox], input[type=checkbox]:checked { 
     visibility:visible; 
    } 
</style>

來源

2016-04-21 13:32:15

退房此代碼檢查：標籤輸入[類型=複選框] { 顯示：無; position：absolute; } 標籤跨度{ margin-left：20px; } label：hover input [type = checkbox]，input [type = checkbox]：checked { display：inline; }

您的代碼：文本

label input[type=checkbox] { 
 
     display: none; 
 
     position:absolute; 
 
    } 
 
    label span { 
 
     margin-left: 20px; 
 
    } 
 
    label:hover input[type=checkbox], input[type=checkbox]:checked{ 
 
     display: inline; 
 
    }

<label> 
 
     <input type="checkbox"> 
 
     <span>text</span> 
 
    </label>

來源

2016-04-21 13:32:46

我看到幾個選項：

使複選框上的文字的權利，這種方式文字不會移動。
使用不透明度，而不是能見度（能見度不被一些瀏覽器支持）
動畫複選框，使文本向右滑動（這樣的複選框的寬度（或最大寬度）與溢出隱藏設置爲0，然後與過渡更新它）

不透明度：https://jsfiddle.net/ahmadabdul3/ghogvcsx/1/

動畫：https://jsfiddle.net/ahmadabdul3/ghogvcsx/

<label> 
    <span> 
    <input type="checkbox"> 
    </span> 
    text 
</label> 

label span { 
    display: inline-block; 
    max-width: 0; 
    overflow: hidden; 
    transition: max-width 0.3s linear; 
} 

label:hover span { 
    max-width: 30px; 
    transition: max-width 0.3s linear; 
}

來源

2016-04-21 13:36:27

在懸停或顯示期間隱藏/顯示的標籤內的複選框定位

回答

相關問題