如何将带有黑色名称和红色星形的名称应用到占位符星作为必填项？

作者: Minions
发布时间: 2024-12-11 11:50:54 (1月前)
转自：

4 条回复

0#
回复此人
12345 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 它会对你有用。我刚刚编写了单场字段。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .form-group{position:relative;} .form-group input{position:relative;z-index:9;background:transparent;border:1px solid #aaa;padding: 5px} .form-group label{position:absolute;left:5px;top:5px;z-index:1;color:#ccc;} .form-group label::after{content:"*";color:red;} input[required]:valid + label{display: none;} </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <div class="form-group"> <input type="text" name="name" required="required" /> <label>Enter first name</label> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
哦哦了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试这个我认为它对你有用 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> input { width: 200px; padding: 8px; } input[required] + label { position: relative; color: #000; font-size: 16px; left: -210px; } input[required] + label:after { content: '*'; color: red; } .btn { width: auto; margin: 10px 0; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <form> <input type="text" id="box1" required="required" /> <label for="name">Enter First Name</label><br/><br/> <input type="text" id="box1" required="required" /> <label for="name">Enter Last Name</label><br/> <input class="btn" type="submit" /> </form> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
2#
回复此人
爱我真好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 没有完美的解决方案。 </p> <P> 第一个选项是使用背景图像，但必须为每个字段手动设置星形位置： </p> <pre> <code> input::placeholder { background-image: url('images/some-red-star.png') no-repeat; background-position-x: 50px; } </code> </pre> <P> 如果你不能手动放置每个星星，你可以使用假的html占位符，每次放置一个div，并使其表现为占位符： </p> <pre> <code> <input required="required"> <div class="placeholder">name<span>*</span> .placeholder { position: ... pointer-events: none; user-select: none; } .placeholder > span { color: red; } input:valid ~ .placeholder { display: none; } </code> </pre> </DIV>

编辑

登录后才能参与评论