使文本区域像记事本JavaFX

Question

如何使用 CSS 或代码将文本字段设置为看起来像记事本的样式？

我试过 here 所说的是：

textarea {
 background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

但它没有影响我的文本区域。

这是我要找的东西：

谢谢

Answer 1

您可以通过为文本区域提供线性渐变背景并指定行高和字体大小以配合背景和相应的文本对齐方式来实现您想要的效果。

代码片段如下：：

#container {
  margin: 0;
  padding: 0;
}
textarea {
  margin: 0;
  padding: 0 4px;
  height: 150px;
  width: 300px;
  position: relative;
  color: #444;
  line-height: 20px;
  border: 1px solid #d2d2d2;
  background: #fff;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#3b84aa), color-stop(4%, #f2e47c)) 0 0px
  /*4px*/
  ;
  background: -webkit-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
  /*4px*/
  ;
  background: -moz-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
  /*4px*/
  ;
  background: -ms-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
  /*4px*/
  ;
  background: -o-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
  /*4px*/
  ;
  background: linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
  /*4px*/
  ;
  -webkit-background-size: 100% 20px;
  -moz-background-size: 100% 20px;
  -ms-background-size: 100% 20px;
  -o-background-size: 100% 20px;
  background-size: 100% 20px;
  box-shadow: 2px 2px 10px #3391fc;
}

<div id="container">
  <textarea name="">Have some text here. Blah. blah. blah</textarea>
</div>

您可以找到 fiddle link here

希望这对您有所帮助。 编码愉快:)

Answer 2

接近

为 TextArea 的内容部分创建线性渐变背景。

-jewelsea-lined-notepad:
    linear-gradient(
        from 0px 0px to 0px 11px,
        repeat,
        gainsboro,
        gainsboro 6.25%,
        cornsilk 6.25%,
        cornsilk
    );

实施说明

棘手的部分是让线性渐变中的线条与文本行对齐。我认为将渐变大小指定为 1em（例如，每行 1 个字体大小度量）会很简单，但这不允许渐变对齐。所以我只是指定了绝对像素大小的梯度（通过反复试验发现）。不幸的是，使用这种方法，当您更改文本区域的字体或字体大小时，您需要手动调整渐变中的值。但是除了尺码困难之外，它似乎还不错。

参考资料

JavaFX CSS Reference Guide.
modena.css - 默认 JavaFX CSS 样式表。

示例输出

示例解决方案

Notepad.java

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Notepad extends Application {
    @Override
    public void start(Stage stage) {
        TextArea textArea = new TextArea();
        Label title = new Label(
                "Benjamin Franklin: Selected Quotes"
        );
        title.getStyleClass().add("title");

        VBox layout = new VBox(
                10,
                title,
                textArea
        );
        layout.setPadding(new Insets(10));
        VBox.setVgrow(textArea, Priority.ALWAYS);

        Scene scene = new Scene(layout);
        scene.getStylesheets().add(getClass().getResource(
                "notepad.css"
        ).toExternalForm());
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

notepad.css

.root {
    -jewelsea-lined-notepad:
        linear-gradient(
            from 0px 0px to 0px 11px,
            repeat,
            gainsboro,
            gainsboro 6.25%,
            cornsilk 6.25%,
            cornsilk
        );
}

.title {
    -fx-font-size: 16px;
}

.text-area {
    -fx-font-family: "Comic Sans MS";
    -fx-font-size: 15px;
}

.text-area .content {
    -fx-background-color: -jewelsea-lined-notepad;
}

.text-area:focused .content {
    -fx-background-color:
        -fx-control-inner-background,
        -fx-faint-focus-color,
        -jewelsea-lined-notepad;
}

使文本区域像记事本JavaFX

make text area like notepad JavaFX

css

javafx

textfield