我有一個看起來像這樣的形式的輸入： <input type="text" placeholder="My placeholder" value="">
我希望能夠將 css 中的占位符內容更改為"My placeholder" 其他內容。我設法使用以下 css 片段更改了顏色和背景以及其他屬性，但占位符的內容我無法更改。我應該放什么屬性而不??是 content？
::placeholder {
font-style: italic;
font-size: 1em;
color: mintcream;
background: thistle;
padding: 5px;
content : "some other placeholder" !important;
}
uj5u.com熱心網友回復：
您無法更改屬性的值，CSS但如果您的輸入在 a 內form并且您可以將input.
簡而言之：
- 用
<span>元素包裝輸入 - 將偽元素重疊在輸入上并應用您為偽類
span::before選擇的樣式:placeholder - 更改顏色和背景，
:placeholder使其不再可見 - 設定
pointer-events為nonefor ，span::before因此對該元素的每次點擊都將被忽略并從底層input元素中截取。 - 使用必需的屬性
input - 當
form是:valid然后隱藏偽元素
span::before,
::placeholder {
font-family: arial;
font-style: italic;
font-size: .75rem;
padding: 5px;
line-height: 1;
box-sizing: border-box;
}
::placeholder {
color: transparent;
background: transparent;
}
span {
position: relative;
}
span::before {
content : "some other placeholder very long" ;
position: absolute;
inset: 0 5px;
z-index: 1;
color: mintcream;
background: thistle;
width: calc(100% - 10px);
white-space: nowrap;
overflow: hidden;
pointer-events: none;
}
form:valid span::before {
display: none;
}<form>
<span><input type="text" placeholder="my placeholder" required /></span>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/495412.html
上一篇：React-hook-from表單里面的一個。如何做獨立的第二種形式？
下一篇：使用物件設定formData