Failing to configure a label::after content in checkbox

[denis-sanches]

What steps will reproduce the problem?

1. Generate some form with Gii (CRUD Generator).
2. Use a ->checkbox() field.
3. Configure some CSS to append (::after) a red * for required fields' labels.

CSS:

div.required label:after {
    content: " *";
    color: red;
    background-color: yellow; /* just for visual test */
}

views/usuario/_form.php (raw/example):

<?php

use yii\bootstrap4\Html;
//use yii\widgets\ActiveForm;
use yii\bootstrap4\ActiveForm;

/* @var $this yii\web\View */
/* @var $model app\models\Usuario */
/* @var $form yii\bootstrap4\ActiveForm */
?>

<div class="usuario-form">

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'email')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'ativo')->checkbox() ?>

    <div class="form-group">
        <?= Html::submitButton('Salvar', ['class' => 'btn btn-success']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

What's expected?

Append the red * after the label text for required fields as using the default yii\widgets\ActiveForm as follows:

What do you get instead?

It's overlapping the dropbox, "appending" the label::after before the label, as follows (just changing the above PHP code to use yii\bootstrap4\ActiveForm; instead)

Additional info

It's my first time contributing here... and CSS is not my field. I've tried some minimal changes to this getting working without having to pass a template option but with no success. If that's not a bug and just a code configuration problem, my apologies in advance. Ah... the same occurs with ->radio();

Q	A
Yii vesion	2.0.40
yii2-bootstrap4	2.0.9
PHP version	7.4.3
Operating system	Ubuntu 20.04

[simialbi]

It's because custom controls are used by default in yii\bootstrap4\ActiveForm and ::before and ::after are used to display the custom control.

[simialbi]

You can ovveride the template to use default checkboxes like this (untested)

<?= $form->field($model, 'ativo', [
    'checkTemplate' => "{label}\n{input}\n{error}\n{hint}"
])->checkbox() ?>

[denis-sanches]

Hi, @simialbi. Thank you!!

I've tried overring the template but with no success. In fact, this CSS seems to work to all cases in BS4, even radio():

div.required > label::after, div.required > .custom-control::after {
    content: " *";
    color: red;
}

Again, thank you so much!