Question

我正在尝试在Vaadin中进行内联编辑。我认为实现这一目标的好方法是造型文本字段使它们看起来像标签，并在聚焦时切换到文本字段的样式。

是否可以将文本字段设置为看起来像标签？如果有可能，我怎么能做到？

Answer 1

您可以在自己的主题中覆盖Vaadin样式。如果您还没有主题，请在名为themes的VAADIN目录下创建一个目录，并按主题名称在主题中创建一个子目录，例如。 mytheme的。

Vaadin 6：

在您的应用程序类中调用setTheme("mytheme")
在您的代码中致电myTextField.setStyleName("labelstyle");
在新主题目录中创建styles.css。
在styles.css中添加以下内容：

styles.css的：

 @import "../reindeer/styles.css";

 .v-textfield-labelstyle {
     background: none repeat scroll 0 0 #F5F5F5;
     border-color: #F5F5F5;
     border-image: none;
     border-left: 1px solid #F5F5F5;
     border-radius: 3px 3px 3px 3px;
     border-right: 1px solid #F5F5F5;
     border-style: solid;
     border-width: 1px;
 }

Vaadin 7：

在您的UI类中添加@Theme("mytheme")注释
在您的代码中致电myTextField.setStyleName("labelstyle");
在新主题目录中创建样式。 scss 。
在样式中添加以下内容。 scss

styles.css的：

 @import "../reindeer/reindeer.scss";

 .mytheme {
    @include reindeer;

    .v-textfield-labelstyle {
        background: none repeat scroll 0 0 #F5F5F5;
        border-color: #F5F5F5;
        border-image: none;
        border-left: 1px solid #F5F5F5;
        border-radius: 3px 3px 3px 3px;
        border-right: 1px solid #F5F5F5;
        border-style: solid;
        border-width: 1px;
    }
}

通过调用主题目录中的java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css

这个小技巧会给你一个类似Label的TextField，在聚焦时变成普通的TextField。

请注意，这仅适用于使用Reindeer主题和默认背景颜色＃F5F5F5。如果您使用其他主题或背景颜色与原始颜色不同，则必须稍微调整一下。

Answer 2

文本字段由此HTML表示：

<input type="text" class="v-textfield v-widget" tabindex="0" style="">

如何在“v-textfield v-widget”CSS上使用How to remove border (outline) around text/input boxes? (Chrome)呢？

CSS标签样式Vaadin

2 个答案: