CSS标签样式Vaadin

Question

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

是否可以将文本字段样式化以呈现标签的外观？如果可能的话，我该如何做呢？

- akuzma

---

你有想象中的样子的例子吗？我认为这是可能的，但“label”这个词相当广泛，除非你在谈论HTML '<label></label>'。 - user1720624

是的...你想要什么样的外观？ - dezman

我有一个网格布局，其中包含“姓名”，“姓氏”，“电话”等字段及其值。我想单击文本，例如“约翰”，然后“约翰”应变为可编辑文本字段，在聚焦另一个字段后，“约翰”应再次变为纯文本。 - akuzma

Answer 1

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

Vaadin 6：

1. 在您的应用程序类中调用setTheme("mytheme")
2. 在您的代码中调用myTextField.setStyleName("labelstyle");
3. 在您的新主题目录中创建styles.css。
4. 在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：

1. 在您的 UI 类中添加 @Theme("mytheme") 注释
2. 在您的代码中调用 myTextField.setStyleName("labelstyle");
3. 在您的新主题目录下创建 styles.scss
4. 在 styles.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;
    }
}

1. 在您的主题目录中调用java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css来编译您的主题。

这个小技巧将给您一个类似标签的文本框，当聚焦时变成普通文本框。

请注意，这仅适用于使用Reindeer主题和默认背景颜色＃F5F5F5时。如果您使用其他主题或背景颜色与原始颜色不同，则需要进行一些微调。

- miq

Answer 2

文本框由以下HTML表示：

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

如何将 Chrome中如何去除文本/输入框周围的边框（轮廓）？ 应用于 "v-textfield v-widget" CSS？

- Ondrej Kvasnovsky