yii2 修改验证码小部件样式

Posted 御世制人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了yii2 修改验证码小部件样式相关的知识,希望对你有一定的参考价值。

 

<?= $form->field($model, ‘verifyCode‘,[‘labelOptions‘ => [‘class‘ => ‘yanzhengma‘,‘style‘=>[‘margin-right‘=>‘50px‘]]])->widget(Captcha::className()) ?>

生成的代码

<div class="form-group field-signupform-verifycode">
  <label class="yanzhengma" style="margin-right: 50px;" for="signupform-verifycode">验证码</label>
  <img id="signupform-verifycode-image" src="/frontend/web/index.php?r=site%2Fcaptcha&amp;v=5a17ff5fc8f06" > <input type="text" id="signupform-verifycode" class="form-control" name="SignupForm[verifyCode]">
   
  <p class="help-block help-block-error"></p>
  </div>

以下为主要的样式修改的代码,大家可以看着修改。如需要修改类而不是样式,只需要替换style为class即可。

 

[php] view plain copy
 
  1. <?php $form = ActiveForm::begin([‘action‘ => [‘site/login‘], ‘method‘ => ‘post‘]);?>  
  2.     <div style=‘width:255px;min-height:40px;height:auto;‘>  
  3.         <label for=‘loginform-username‘ style=‘margin-right:10px;line-height:2.2em;float:left;‘>用户名</label>  
  4.         <?= $form->field($model, ‘username‘)  
  5.             ->label(false)  
  6.             ->textInput([‘style‘ => ‘float:left;width:200px;‘])  
  7.             ->error([‘style‘ => ‘line-height:2.2em;‘]); ?>  
  8.     </div>  
  9.     <div style=‘width:255px;min-height:40px;height:auto‘>  
  10.     <label for=‘loginform-username‘ style=‘padding-left:13px;margin-right:10px;line-height:2.2em;float:left;‘>密码</label>  
  11.     <?= $form->field($model, ‘password‘)  
  12.         ->passwordInput()  
  13.         ->label(false)  
  14.         ->textInput([‘style‘ => ‘float:left;width:200px;‘])  
  15.         ->error([‘style‘ => ‘line-height:2.2em;‘]); ?>  
  16.     </div>  
  17.     <div style=‘width:255px;min-height:20px;height:auto‘>  
  18.         <?= $form->field($model, ‘rememberMe‘)  
  19.         ->checkBox([‘style‘ => ‘flot:left;‘])  
  20.         ->label(‘请记住我‘, [‘style‘ => ‘margin-right:-35px;‘]); ?>  
  21.     </div>  
  22.   
  23.     <?= html::submitButton(‘登录‘, [‘class‘ => ‘btn btn-primary‘, ‘name‘ => ‘submit-button‘]); ?>  

以上是关于yii2 修改验证码小部件样式的主要内容,如果未能解决你的问题,请参考以下文章

Dojo 选择小部件验证

YII2 小部件(widgets)

Yii2 DetailView小部件

Yii2:如何禁用或只读 Select2 小部件?

yii2之GridView小部件

Yii2框架学习 4-1 小部件学习 (DetailViewActiveFormGridView )