[英]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! 我在ActiveForm文档后修改我的代码,它的工作原理!
Code modified: 代码修改:
<?= $form->field($model_product, 'amount', ['template' => '{label}${input}'])->textInput(['class'=>'smallInputFormInline'])->label('Amount',['class'=>'labelModalFormInline']) ?>
For example you can add some addons to input using ActiveForm field "template"
option. 例如,您可以使用ActiveForm字段
"template"
选项向输入添加一些插件。
Eg %
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}'
]); ?>
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 :) 欣赏它是否有用:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.