如何为表单中的所有字段动态添加星号

Question

我想问你如何在表单中为不同类型的必填字段加星号"输入，选择，文本区域"；。

我几乎什么都试过了，但没有好结果。你能给我一些解决方案吗。

我的代码是：

<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>

我上次试过这个：

::-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: '*';   
}

谢谢你的建议。

Answer 1

由于不能在input标记中使用伪元素，因此也可以在<div>元素上使用before。

注意： flex属性只是为了使div上的星号居中，看起来很漂亮。这个问题对你来说并不重要

.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>

以下是您不能在input标签中使用before或after的原因。

如果这达到了你的目标，请告诉我！