Home / Questions / 563416
Accepted
Max Jimenez
Asked: 2022-10-21 13:06:16 +0800 CST 2022-10-21 13:06:16 +0800 CST

Selector :required not working in Input CSS

  • 772

I have the following form.

.form-control{
    border-radius: 100vw;
    margin-bottom: .75rem;
    text-decoration: none;
    appearance: none;
    padding: 0.375rem 1.5rem !important;
    position: relative;
}
.form-control:required::after{
    content: '*';
    font-size: 1.5rem;
    color: #417A5F;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="modalForm">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                 <h5>Form</h5>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control form-input" id="fname" placeholder="First Name" required>
                    <input type="text" class="form-control form-input" id="lname" placeholder="Last Name" required>
                    <select name="gender" class="form-control" id="gender" required>
                        <option value="Null" selected hidden>Gender</option>
                        <option value="M">Male</option>
                        <option value="F">Female</option>
                    </select>
                    <input type="date" name="dob" id="dob" class="form-control" placeholder="Date of Birth" required>
                    <input type="tel" name="phone" id="phone" class="form-control" placeholder="Phone Number" required>
                    <input type="email" name="email" id="email" class="form-control" placeholder="Email" required>
                    <input type="tel" name="zipcode" id="zipcode" class="form-control" placeholder="Zip Code">
                    <input type="text" name="street" id="street" class="form-control" placeholder="Address" required>
                    <input type="text" name="city" id="city" class="form-control" placeholder="City" required>
                    <select name="state" class="form-control" id="state" required>
                        <option value="Null" selected hidden>State</option>
                    </select>
                    
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>
    </div>

And currently I have the problem with the :required selector, because apparently it only recognizes one input of all those that are also in required. What could be happening?

html

3 Answers

  1. Sr1871's answer is valid but some input types break the rule. Here is a list of how it affects

    input{
    border-radius: 100vw;
    margin-bottom: .75rem;
    text-decoration: none;
    appearance: none;
    padding: 0.375rem 1.5rem !important;
    position: relative;
}
input::after{
    content: '*';
    font-size: 1.5rem;
    color: #417A5F;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="modalForm">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                 <h5>Form</h5>
                </div>
                <div class="modal-body"> 
                    <label>Button</label>
                    <input type="button"><br>
                    <label>checkbox</label>
                    <input type="checkbox" value="ok"><br>
                    <label>color</label>
                    <input type="color"><br>
                    <label>date</label>
                    <input type="date"><br>
                    <label>datetime-local</label>
                    <input type="datetime-local"><br>
                    <label>email</label>
                    <input type="email"><br>
                    <label>file</label>
                    <input type="file"><br> 
                    <label>image</label>
                    <input type="image"><br>
                    <label>month</label>
                    <input type="month"><br>
                    <label>number</label>
                    <input type="number"><br>
                    <label>password</label>
                    <input type="password"><br>
                    <label>radio</label>
                    <input type="radio"><br>
                    <label>range</label>
                    <input type="range"><br>
                    <label>reset</label>
                    <input type="reset"><br>
                    <label>search</label>
                    <input type="search"><br>
                    <label>submit</label>
                    <input type="submit"><br>
                    <label>tel</label>
                    <input type="tel"><br>
                    <label>text</label>
                    <input type="text"><br>
                    <label>time</label>
                    <input type="time"><br>
                    <label>url</label>
                    <input type="url"><br>
                    <label>week</label>
                    <input type="week"><br>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>
    </div>

    In these cases, extra elements and CSS are usually used. No js needed. For example we could use an extra div and the selector :has

    .form-control {
    border-radius: 100vw;
    margin-bottom: .75rem;
    text-decoration: none;
    appearance: none;
    padding: 0.375rem 1.5rem !important;
   
} 
.form-field {
 position: relative;
}
.form-field:has(input[required])::after  {  
   content: '*';
   position: absolute;
   top: 0;
   left: 1em;
   color: red;
} 
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="modalForm">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                 <h5>Form</h5>
                </div>
                <div class="modal-body"> 
                   <div class="form-field">
                     <input type="text" name="name" placeholder="name" class="form-control"   required> 
                   </div>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>
    </div>

    This example would not be valid yet for Firefox as it does not have support enabled by default for these selectors.

    https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility

    • 2
  2. Best Answer

    The problem is that the pseudo-elementand only work on containing tags, and since input can't contain other elements, it doesn't :before. :afterThat is why it only appears in the select, since it does contain :aftergiven that it can contain other elements.

    You can verify that by removing the :afterapplies to all elements.

    .form-control{
    border-radius: 100vw;
    margin-bottom: .75rem;
    text-decoration: none;
    appearance: none;
    padding: 0.375rem 1.5rem !important;
    position: relative;
}
.form-control:required{
    border: 2px solid red;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="modalForm">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                 <h5>Form</h5>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control form-input" id="fname" placeholder="First Name" required>
                    <input type="text" class="form-control form-input" id="lname" placeholder="Last Name" required>
                    <select name="gender" class="form-control" id="gender" required>
                        <option value="Null" selected hidden>Gender</option>
                        <option value="M">Male</option>
                        <option value="F">Female</option>
                    </select>
                    <input type="date" name="dob" id="dob" class="form-control" placeholder="Date of Birth" required>
                    <input type="tel" name="phone" id="phone" class="form-control" placeholder="Phone Number" required>
                    <input type="email" name="email" id="email" class="form-control" placeholder="Email" required>
                    <input type="tel" name="zipcode" id="zipcode" class="form-control" placeholder="Zip Code">
                    <input type="text" name="street" id="street" class="form-control" placeholder="Address" required>
                    <input type="text" name="city" id="city" class="form-control" placeholder="City" required>
                    <select name="state" class="form-control" id="state" required>
                        <option value="Null" selected hidden>State</option>
                    </select>
                    
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>
    </div>

    • 1

  3. Pseudo-selectors :beforeand :afteronly work with tags that have a start and a close, for example , <span></span>they don't work with tags that don't have a close, for example<input stype="text">

    So it would be best to come up with a javascript-based solution, since you're using Bootstrap I guess you're also using jQuery, so you can try something like this.

    jQuery(document).ready(function(){

        // Obtenemos todos los inputs con Placeholder
        let inputs = jQuery( 'input[required]' );

        // Actualizamos el Placeholder
        inputs.each(function(){
            let placeholder = jQuery(this).attr( 'placeholder' );
            jQuery(this).attr( 'placeholder', '* ' + placeholder );
        });

    });

    leaving something like this

    jQuery(document).ready(function(){

        // Obtenemos todos los inputs con Placeholder
        let inputs = jQuery( 'input[required]' );

        // Actualizamos el Placeholder
        inputs.each(function(){
            let placeholder = jQuery(this).attr( 'placeholder' );
            jQuery(this).attr( 'placeholder', '* ' + placeholder );
        });

    });
    .form-control{
border-radius: 100vw;
margin-bottom: .75rem;
text-decoration: none;
appearance: none;
padding: 0.375rem 1.5rem !important;
position: relative;
}
.form-control:required::after{
content: '*';
font-size: 1.5rem;
color: #417A5F;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

        <div id="modalForm">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                     <h5>Form</h5>
                    </div>
                    <div class="modal-body">
                        <input type="text" class="form-control form-input" id="fname" placeholder="First Name" required>
                        <input type="text" class="form-control form-input" id="lname" placeholder="Last Name" required>
                        <select name="gender" class="form-control" id="gender" required>
                            <option value="Null" selected hidden>Gender</option>
                            <option value="M">Male</option>
                            <option value="F">Female</option>
                        </select>
                        <input type="date" name="dob" id="dob" class="form-control" placeholder="Date of Birth" required>
                        <input type="tel" name="phone" id="phone" class="form-control" placeholder="Phone Number" required>
                        <input type="email" name="email" id="email" class="form-control" placeholder="Email" required>
                        <input type="tel" name="zipcode" id="zipcode" class="form-control" placeholder="Zip Code">
                        <input type="text" name="street" id="street" class="form-control" placeholder="Address" required>
                        <input type="text" name="city" id="city" class="form-control" placeholder="City" required>
                        <select name="state" class="form-control" id="state" required>
                            <option value="Null" selected hidden>State</option>
                        </select>
                        
                    </div>
                    <div class="modal-footer">
                      <button class="btn btn-primary">Button</button>
                    </div>
                </div>
            </div>
        </div>

    However, what I recommend is that you do not complicate your life, simply add a label with your text without resorting to other methods.

    • 1