How to put asterisk dynamically for all fields in form

Issue

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 class="section" id="section-info">
            <div class="add-item__form-data">
                    <div class="add-item__input-wrapper">
                        <input type="text" name="title" value="<?= showValueIfSet('title') ?>" class="add-item__input<?= highlightInputIfEmpty('title_error') ?>" placeholder="Názov (maximálne 60 znakov)" maxlength="60" required>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="category" class="add-item__select<?= highlightInputIfEmpty('category_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">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 class="add-item__input-wrapper">
                        <select name="subcategory" class="add-item__select <?= highlightInputIfEmpty('subcategory_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Podkategória</option>
                            <option value="mobil"<?= markSelectedAfterResend('subcategory', 'mobil') ?>>Mobilné telefóny</option>
                            <option value=""<?= markSelectedAfterResend('subcategory', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div class="add-item__input-wrapper">
                        <textarea name="text" class="add-item__textarea<?= highlightInputIfEmpty('text_error') ?>" cols="30" rows="2" placeholder="Text inzerátu (minimálne 20 znakov)" minlength = "20" required><?= showValueIfSet('text') ?></textarea>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="status" class="add-item__select<?= highlightInputIfEmpty('status_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Stav</option>
                            <option value="new"<?= markSelectedAfterResend('status', 'new') ?>>Nový</option>
                            <option value=""<?= markSelectedAfterResend('status', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="price_type" class="add-item__select<?= highlightInputIfEmpty('price_type_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">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 class="add-item__input-wrapper">
                        <input type="text" id="input-price" name="price" value="<?= showValueIfSet('price') ?>" class="add-item__input<?= highlightInputIfEmpty('price_error') ?>" placeholder="Cena" required><span class="euro-symbol">€</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.

Solution

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 class="section" id="section-info">
            <div class="add-item__form-data">
                    <div class="add-item__input-wrapper">
                        <input type="text" name="title" value="<?= showValueIfSet('title') ?>" class="add-item__input<?= highlightInputIfEmpty('title_error') ?>" placeholder="Názov (maximálne 60 znakov)" maxlength="60" required>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="category" class="add-item__select<?= highlightInputIfEmpty('category_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">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 class="add-item__input-wrapper">
                        <select name="subcategory" class="add-item__select <?= highlightInputIfEmpty('subcategory_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Podkategória</option>
                            <option value="mobil"<?= markSelectedAfterResend('subcategory', 'mobil') ?>>Mobilné telefóny</option>
                            <option value=""<?= markSelectedAfterResend('subcategory', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div class="add-item__input-wrapper">
                        <textarea name="text" class="add-item__textarea<?= highlightInputIfEmpty('text_error') ?>" cols="30" rows="2" placeholder="Text inzerátu (minimálne 20 znakov)" minlength = "20" required><?= showValueIfSet('text') ?></textarea>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="status" class="add-item__select<?= highlightInputIfEmpty('status_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Stav</option>
                            <option value="new"<?= markSelectedAfterResend('status', 'new') ?>>Nový</option>
                            <option value=""<?= markSelectedAfterResend('status', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="price_type" class="add-item__select<?= highlightInputIfEmpty('price_type_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">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 class="add-item__input-wrapper">
                        <input type="text" id="input-price" name="price" value="<?= showValueIfSet('price') ?>" class="add-item__input<?= highlightInputIfEmpty('price_error') ?>" placeholder="Cena" required><span class="euro-symbol">€</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!

Answered By - Kurt