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;
}

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

这是我正在寻找的：

enter image description here

由于

Answer 1

<强>方法

为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样式表。

示例输出

death and taxes

示例解决方案

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;
}

Answer 2

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

代码片段如下::

#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

希望这会有所帮助。 快乐编码：）

使文本区域像记事本JavaFX

2 个答案: