Yii2: How add a symbol before and after an input field

问题

How can I add a symbol before and after of an input text? Just like the image attach.

My code:

<?= $form->field($model_product, 'percent')->textInput(['class'=>'smallInputFormInline'])->label('Percent',['class'=>'labelModalFormInline']) ?>

<?= $form->field($model_product, 'percent_all')->textInput(['class'=>'smallInputFormInline'])->label('Percent All',['class'=>'labelModalFormInline']) ?>

<?= $form->field($model_product, 'amount')->textInput(['class'=>'smallInputFormInline'])->label('Amount',['class'=>'labelModalFormInline']) ?>

SOLUTION

I modify my code following ActiveForm documentation and it works!

Code modified:

<?= $form->field($model_product, 'amount', ['template' => '{label}${input}'])->textInput(['class'=>'smallInputFormInline'])->label('Amount',['class'=>'labelModalFormInline']) ?>

回答1:

For example you can add some addons to input using ActiveForm field "template" option.

E.g. % addon at the end of input:

<?= $form->field($model_product, 'percent', [
            'template' => '{beginLabel}{labelTitle}{endLabel}<div class="input-group">{input}
            <span class="input-group-addon">%</span></div>{error}{hint}'
        ]); ?>

回答2:

Using pseudo classes we can do.

.input-symbol {
  position: relative;
  padding: 20px;
}
.input-symbol:before {
  content: "\0024";
  position: absolute;
  left:0;
  
}
.input-symbol:after {
  content: "\0024";
  position: absolute;
}

<div class="input-symbol">
  <input type="text">
</div>

Appreciate if it is useful :)

来源：https://stackoverflow.com/questions/47140005/yii2-how-add-a-symbol-before-and-after-an-input-field

标签

php

html

css

yii2