如何自定义表单 css

Question

当使用@helper.input时....在模板中，默认 CSS 的示例是：

<dl class="error" id="age_field">
    <dt><label for="age">Age:</label></dt>
    <dd><input type="text" name="age" id="age" value=""></dd>
    <dd class="error">This field is required!</dd>
    <dd class="error">Another error</dd>
    <dd class="info">Required</dd>
    <dd class="info">Another constraint</dd>
</dl>

如何自定义它？

谢谢。

Answer 1

如果您的目标只是将类应用于输入帮助程序，则可以使用如下所示的代码段来执行此操作：

@helper.inputText(myForm("username"), 'class -> "myClass", 'size -> 30)

如果要设置错误过程的样式，则需要将 FieldConstructor 放在一起，该函数基本上可以用作默认输入帮助程序的替换模板。

这可以通过创建模板来完成：

myFieldConstructorTemplate.scala.html

@(elements: helper.FieldElements)
<div class="@if(elements.hasErrors) {error}">
    <label for="@elements.id">@elements.label</label>
    <div class="input">
        @elements.input
        <span class="myErrorClass">@elements.errors.mkString(", ")</span>
        <span class="myHelpClass">@elements.infos.mkString(", ")</span> 
    </div>
</div>

并将其导入到您要在其中使用它的模板中：

@implicitField = @{ FieldConstructor(myFieldConstructorTemplate.f) }
@inputText(myForm("username"))

来源：播放 API 文档