make text area like notepad JavaFX [closed]

问题

How can I style a text field to look like a notepad using CSS or code?

I tried what said here, which was:

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

but it didn`t affect my text area.

Here is what i`m looking for:

Thanks

回答1:

Approach

Create a lined linear gradient background for the content portion of a TextArea.

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

Implementation Notes

The tricky part is having the lines in the linear gradient line up with the lines of text. I thought it would be a simple as specifying the gradient size as 1em (e.g. 1 measure of the font size per line), but that didn't allow the gradients to align. So I just specified the gradient in absolute pixel sizes (found by trial and error). Unfortunately, with this approach, as you change fonts or font sizes for the text area, you need to adjust the values in the gradient manually. But other than the sizing difficulty, it seems to work well.

References

JavaFX CSS Reference Guide.
modena.css - default JavaFX CSS stylesheet.

Sample Output

Sample Solution

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

回答2:

You can achieve what you want by giving a lineargradient background to the text area and also specifying line-height and font size to play with the background and the respective text alignment.

The code snippet follows::

#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>

You can find the fiddle link here

Hope this helps. Happy coding :)

来源：https://stackoverflow.com/questions/29636578/make-text-area-like-notepad-javafx

标签

css

javafx

textfield