Question

我有一个文字输入。我把一个带有红色星标的标签突出显示在表单提交中需要输入。我做的是

<html>
<head>
</script>
<style type="text/css">

input[required] + label {
    color: #999;
    font-family: Arial;
    font-size: 17px;
    position: relative;
    /*left: -230px;  the negative of the input width */
}

input[required] + label:after {
    content:'*';
    color: red;
}

/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
    display: inline-block;
}

/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
    display: none;
}
</style>
</head>
<body>
<form name="registerForm" action="submit_page.php"   method="post">
<div class="form_box">
    <div class="input_box ">
        <input maxlength="60" type="text" name="name" id="name" required="required" />
        <label for="name">Name</label>
        <div id="name-error" class="error-box"></div>
    </div>
    <div class="clear"></div>
</div>
</form>
</div>
</body>

适用于文本输入。

我为<select <select/>做了同样的事情。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>



<style type="text/css">
#header { background-color:green; color:white; text-align:center; padding:5px;}
#background {background: url(register_background.png);}
body {
    background-color: #cccccc;
}

.star { color: red;} 
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;} 
.button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
select[required] + label {
    color: #999;
    font-family: Arial;
    font-size: 17px;
    position: relative;
    /*left: -230px;  the negative of the input width */
}

select[required] + label:after {
    content:'*';
    color: red;
}

/* show the placeholder when input has no content (no content = invalid) */
select[required]:invalid + label {
    display: inline-block;
}

/* hide the placeholder when input has some text typed in */
select[required]:valid + label{
    display: none;
}


</style>
</head>

<body>
<div id="header">
<h1>Please add your property to advertise</h1>
</div>

<div id="background">
<form name="advertiseForm"   method="post">
<br /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="divs_states">  
     <option value="divsORstates" >Divisions or States</option>  
     <option value="saab">Saab</option> 
     <option value="fiat">Fiat</option> 
     <option value="audi">Audi</option> 
     required="required" 
<select/>  
<label for="divs_states">Please select a region</label>
<div id="divs_states-error" class="error-box"></div>

</form>
</div>

</body>
</html>

但我没有看到红星。然后，当我做出选择时，文本不会消失。如果选择为Divisions or States，则应显示label Please select a region together with a red star。万一，我选择萨博，菲亚特，奥迪，文字应该消失。我怎样才能做到这一点？感谢

编辑：

<select name="divs_states" required="required"/>  
     <option value="divsORstates" >Divisions or States</option>  
     <option value="saab">Saab</option> 
     <option value="fiat">Fiat</option> 
     <option value="audi">Audi</option> 

<select/>  
<label for="divs_states">Please select a region</label>
<div id="divs_states-error" class="error-box"></div>

Answer 1

您遇到问题的原因是您使用input标签上select标签中的相同选择器。

你们两个都有这个：

input[required] + label:after {
    content:'*';
    color: red;
}

但是在您选择的表单中，HTML是不同的。它需要是这样的：

select[name] + label:after {
    content:'*';
    color: red;
}

或许有点太多剪切和粘贴？ ; - ）

另请注意，您的结束</select>标记不正确，并且您在元素中放错了required="required"（啊，就是这样）。它应该在开头<select>标记中。实际上，请考虑通过W3C HTML Validation Service运行代码来检查错误。

在HTML组件旁边放置一个标签

1 个答案: