使用CSS来自动添加“必填字段”星号，以形成输入使用CSS来自动添加“必填字段”星号，以形成输入(U

2019-06-12 07:08发布

站内文章 / 后端开发
84 0 0

什么是克服不幸的是，根据需要这个代码将无法正常工作的好方法： 

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

在一个完美的世界，所有需要input s就得到小星号表示该字段是必需的。 由于CSS该解决方案不可能是元素的内容之后插入，不是元素之后，但像这将是理想的。 在数千必填字段的一个网站，我可以在输入前一个改变移动星号一条线（ :after到:before ），或者我可以将它移动到标签的末尾（ .required label:after ）或在标签的前面，或者在容纳盒等的位置...

这不只是在情况下，我改变了主意关于在哪里到处放置星号是很重要的，同时也为奇数的情况下窗体布局不允许在标准位置的星号。 它还与检查窗体或亮点不当完成控件的有效性打得很好。

最后，它不会添加额外的标记。

是否存在有不可能代码的优点全部或大部分什么好的解决办法？

Answer 1:

虽然这是公认的答案， 请忽略我和使用:after的语法如下建议。 我的解决方法是不可访问。

类似的结果可以通过使用一个星号的图像的背景图像和设置标签/输入/外div的背景和星号的图像的尺寸的填充来实现。 事情是这样的： 

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

这将使星号内的文本框，但把同样的div.required而不是.required input可能会更你在找什么，如果少一点优雅。

这种方法不需要附加的输入。



Answer 2:

那是你脑子里有什么？

http://jsfiddle.net/erqrN/1/ 

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required:after { content:" *"; }
</style>

看到https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements



Answer 3:

.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

拨弄你的确切结构： http://jsfiddle.net/bQ859/



Answer 4:

说得准确地放入输入，因为它下面的图片中：

我发现下面的方法： 

.asterisk_input:after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }


 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form>

在我工作的网站正在使用的固定布局，这是确定对我来说编码。

我不知道，这是很好的液体设计。



Answer 5:

在写CSS 

.form-group.required .control-label:after {content:"*";color:red;}

和HTML 

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>


Answer 6:

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

形象对不与选择的下拉箭头重叠的权利一些20px的空间

它看起来是这样的：



Answer 7:

input[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}


Answer 8:

使用jQuery和CSS 

 jQuery(document).ready(function() { jQuery("[required]").after("<span class='required'>*</span>"); }); 
 .required { position: absolute; margin-left: -10px; color: #FB0000; font-size: 15px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" value="xxx" required>



Answer 9:

 .asterisc { display: block; color: red; margin: -19px 185px; } 
 <input style="width:200px"> <span class="asterisc">*</span>



Answer 10:

我觉得这是做的，为什么这么多的头痛的有效途径

    <div class="full-row">
     <label for="email-id">Email Address<span style="color:red">*</span></label>
  <input type="email" id="email-id" name="email-id"  ng-model="user.email" >
    </div>


Answer 11:

您可以实现通过封装中包含了“要求”类其次是‘形式组’级div标签的HTML代码所需的结果。*但是这只有当你有引导。 

<div class="form-group required">
    <div class="required">
        <label>Name:</label>
        <input type="text">
    </div>
  <div>


Answer 12:

对于那些谁在这里结束，但有jQuery的： 

// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')

// css
.red-star { color: red; }


Answer 13:

这是2019年以前的回答这个问题，不使用

  1. CSS网格
  2. CSS变量
  3. HTML5表单元素
  4. SVG在CSS

CSS网格是做形式在2019年你可以有你的标签，而无需额外的div之前你输入的方式，跨越，与星号等遗迹跨越。

这里我们用最少的CSS去：

对于上面的HTML： 

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

占位符文本也可以添加，强烈推荐。 （我只是回答这个中间形式）。

现在的CSS变量： 

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

对表单元素的CSS： 

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

形式本身应该是在CSS格： 

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

对于列中的值可以被设置为1fr auto或1fr与任何如<p>的形式组标签以跨越1 / -1。 你改变的变量在你的媒体查询，让您有输入框会在移动全宽和按照上述在桌面上。 如果你想通过使用CSS变量的方法你也可以改变移动网格差距。

当箱子是有效的，那么你应该得到一个绿色的勾，而不是星号。

CSS中的SVG是不得不做一个往返于服务器，以获得星号的图像保存在浏览器的方式。 以这种方式就可以微调星号，这里的实例是在一个不寻常的角度，则可以编辑了这一点与上述SVG图标是完全可读的。 视框也可以被修改为将高于或低于中心星号。



文章来源: Use CSS to automatically add 'required field' asterisk to form inputs
标签： css forms validation standards
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~