我有：

我有一個帶有用戶名和密碼文本框字段的登錄表單。這些字段包裹在標籤中。刪除標籤文本，但不刪除標籤內的文本框

我需要什麼：

我需要刪除標籤的文本，因爲我想申請佔位符值來替代。

我的代碼：

注：我已經成功爲目標的中斷，但不能指定標籤的呈現的文本。

label[for=user_login] > br, 
 
label[for=user_pass] > br { 
 
    display: none; 
 
}

<p> 
 
    <label for="user_login">Username 
 
    <br> 
 
    <input type="text" name="log" id="user_login" class="input" value="" size="20"> 
 
    </label> 
 
</p> 
 
<p> 
 
    <label for="user_pass">Password 
 
    <br> 
 
    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20"> 
 
    </label> 
 
</p>

我需要一個基於CSS的解決方案。編輯標記不是一種選擇。

來源

2016-01-12 Clarus Dignus

我曾試圖給出根據一個解決方案，你上面說的這個類。 ...

我做的是：

我已經改變了標籤文本（與TEXT-INDENT財產），除去多餘的spances各地「P」標籤，這樣的文字不會出現與空間也不會在那裏，你只能看到文本框爲你自找的。

希望這可以幫助你。

因此您的代碼將是這樣的：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    \t <title></title> 
 
    \t <style type="text/css"> 
 
    \t \t label[for=user_login] > br, 
 
    \t \t label[for=user_pass] > br { 
 
    \t \t \t display: none; 
 
    \t \t } 
 
    \t \t label { 
 
    \t \t \t text-indent: 9999px; 
 
    \t \t \t width: 100%; 
 
    \t \t \t display: block; 
 
    \t \t \t overflow: hidden; 
 
    \t \t } 
 
    \t \t p { 
 
    \t \t \t margin: 0; 
 
    \t \t \t padding: 0; 
 
    \t \t } 
 
    \t </style> 
 
    </head> 
 
    <body> 
 
    \t <p> 
 
    \t \t <label for="user_login">Username 
 
    \t \t \t <br> 
 
    \t \t \t <input type="text" name="log" id="user_login" class="input" value="" size="20"> 
 
    \t \t </label> 
 
    \t </p> 
 
    \t <p> 
 
    \t \t <label for="user_pass">Password 
 
    \t \t \t <br> 
 
    \t \t \t <input type="password" name="pwd" id="user_pass" class="input" value="" size="20"> 
 
    \t \t </label> 
 
    \t </p> 
 
    </body> 
 
</html>

來源

2016-01-12 11:49:22

這是一個更通用的解決方案，單方面適用於所有領域而不依賴像素計數。感謝您的解決方法。 –

@ClarusDignus謝謝你...... :)並且你非常歡迎 –

添加這個屬性上的特定標籤類

label { 
    color: transparent; 
}

或創建特定的標籤類，並添加標籤

.txtlbl label{ 
    color: transparent; 
}

來源

2016-01-12 10:51:58

的**空間的什麼**了由文本佔用？你的解決方案隱藏角色，但不包括空間。當然，有一個CSS選擇器可以完全刪除文本。 –

label { \t color：transparent; \t margin-left：-69px; 位置：相對; } –

它的工作原理是爲每個字段的標籤文本計算文本的像素寬度，但感覺有點ha。。我希望有一個選擇器，可以讓我將文本值設置爲none，但是取而代之，你的解決方案似乎是唯一的一步。謝謝你的時間。 –

爲您的具體情況，你不能編輯標記，你可以做什麼只是給輸入
margin-left -85px;
因此它覆蓋了標籤，標籤所在的位置沒有空間。

來源

2016-01-12 19:02:38

另一個想法...你可以讓輸入字段位於標籤的上方。這將緩解潛在的可訪問性問題，如可發現性，屏幕閱讀器「焦點」以及使用屏幕閱讀器或開關設備時將標籤文本移出屏幕可能導致的滾動。

[for^=user_] > br { 
 
    display: none; 
 
} 
 
[for^=user_] { 
 
    position: relative; 
 
} 
 
input[id^=user_] { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    margin: 0; //solve for Safari showing a bit of text due to 2px default margin 
 
}

<p> 
 
    <label for="user_login">Username 
 
    <br> 
 
    <input type="text" name="log" id="user_login" class="input" value="" size="20"> 
 
    </label> 
 
</p> 
 
<p> 
 
    <label for="user_pass">Password 
 
    <br> 
 
    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20"> 
 
    </label> 
 
</p>

來源

2016-01-12 22:13:17 haltersweb

謝謝你的這個替代概念。你使用的向上箭頭的名稱是什麼？我想知道選擇器的術語來研究瀏覽器支持它。 –

這意味着任何開始。您可以使用$ =來表示任何結尾的內容等。 – haltersweb

以下是關於不同屬性選擇器的一篇很棒的CSS-Tricks文章：https://css-tricks.com/attribute-selectors/ – haltersweb

刪除標籤文本，但不刪除標籤內的文本框

我有：

我需要什麼：

我的代碼：

回答

相關問題