I would like to ask you how to put asterisk for required fields in form which are different types " input, select, textarea".

I tried almost everything but without good result. Can you suggest me some solution.

My code is:

        <section  id="section-info">
            <div >
                    <div >
                        <input type="text" name="title" value="<?= showValueIfSet('title') ?>"  placeholder="Názov (maximálne 60 znakov)" maxlength="60" required>
                    </div>
                    <div >
                        <select name="category"  required>
                            <option value="" disabled selected >Kategória</option>
                            <option value="mobil"<?= markSelectedAfterResend('category', 'mobil') ?>>Mobilné telefóny</option>
                            <option value=""<?= markSelectedAfterResend('category', 'mobil') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <!--predvyplnit kategoriu automaticky-->
                    <div >
                        <select name="subcategory"  required>
                            <option value="" disabled selected >Podkategória</option>
                            <option value="mobil"<?= markSelectedAfterResend('subcategory', 'mobil') ?>>Mobilné telefóny</option>
                            <option value=""<?= markSelectedAfterResend('subcategory', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div >
                        <textarea name="text"  cols="30" rows="2" placeholder="Text inzerátu (minimálne 20 znakov)" minlength = "20" required><?= showValueIfSet('text') ?></textarea>
                    </div>
                    <div >
                        <select name="status"  required>
                            <option value="" disabled selected >Stav</option>
                            <option value="new"<?= markSelectedAfterResend('status', 'new') ?>>Nový</option>
                            <option value=""<?= markSelectedAfterResend('status', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div >
                        <select name="price_type"  required>
                            <option value="" disabled selected >Typ ceny</option>
                            <option value="price"<?= markSelectedAfterResend('price_type', 'price') ?>>Pevná cena</option>
                            <option value=""<?= markSelectedAfterResend('price_type', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div >
                        <input type="text" id="input-price" name="price" value="<?= showValueIfSet('price') ?>"  placeholder="Cena" required><span >€</span>
                    </div><?= showErrorMessage('price_int_error') ?>
            </div>
        </section>

And I tried last time this:

::-webkit-input-placeholder:required:after {
   content: '*';
}

::-moz-placeholder:required:after {
   content: '*'; 
}

::-moz-placeholder:required:after {
   content: '*';
}

::-ms-input-placeholder:required:after {  
   content: '*';
}

.add-item__select-main option[value=""][disabled]:after {
    content: '*';   
}

Thank you for advices.

CodePudding user response：

Since you can't use pseudo element in input tag, you can use before on your <div> element alternatively.

Note: The flex property is just for center the asterisk sign on div to looks pretty. It's not important for you on this question.

.add-item__input-wrapper {
  display: flex;
  align-items: center;
}

.add-item__input-wrapper::before {
  content: '*';
  color: red;
  margin: 2px;
}

<section  id="section-info">
            <div >
                    <div >
                        <input type="text" name="title" value="<?= showValueIfSet('title') ?>"  placeholder="Názov (maximálne 60 znakov)" maxlength="60" required>
                    </div>
                    <div >
                        <select name="category"  required>
                            <option value="" disabled selected >Kategória</option>
                            <option value="mobil"<?= markSelectedAfterResend('category', 'mobil') ?>>Mobilné telefóny</option>
                            <option value=""<?= markSelectedAfterResend('category', 'mobil') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <!--predvyplnit kategoriu automaticky-->
                    <div >
                        <select name="subcategory"  required>
                            <option value="" disabled selected >Podkategória</option>
                            <option value="mobil"<?= markSelectedAfterResend('subcategory', 'mobil') ?>>Mobilné telefóny</option>
                            <option value=""<?= markSelectedAfterResend('subcategory', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div >
                        <textarea name="text"  cols="30" rows="2" placeholder="Text inzerátu (minimálne 20 znakov)" minlength = "20" required><?= showValueIfSet('text') ?></textarea>
                    </div>
                    <div >
                        <select name="status"  required>
                            <option value="" disabled selected >Stav</option>
                            <option value="new"<?= markSelectedAfterResend('status', 'new') ?>>Nový</option>
                            <option value=""<?= markSelectedAfterResend('status', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div >
                        <select name="price_type"  required>
                            <option value="" disabled selected >Typ ceny</option>
                            <option value="price"<?= markSelectedAfterResend('price_type', 'price') ?>>Pevná cena</option>
                            <option value=""<?= markSelectedAfterResend('price_type', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div >
                        <input type="text" id="input-price" name="price" value="<?= showValueIfSet('price') ?>"  placeholder="Cena" required><span >€</span>
                    </div><?= showErrorMessage('price_int_error') ?>
            </div>
        </section>

Here is the reason that you can't use before or after in input tag.

Please let me know if this reached your goal!