0

I am using Bulma and would like to display only the bottom line for the input field. If it is in readonly mode, no line should appear at all.

How can I set this in my .scss so that it works and not for all input fields but only for a specific one?

I found: Input text field with only bottom border But how do I set this in the scss with the help of Bulma?

input {
    outline: 0;
    border-width: 0 0 2px;
    border-color: blue;
}
input:focus {
    border-color: green;
}
<input placeholder="Text" type="text" />

Something like:

@charset "utf-8";

// Generally settings
$blue: #4455ff;
$pink: #ffb3b3;
$dark: #151922;
$blue-invert: #fff;
$family-serif: "Montserrat", sans-serif;

$primary: $blue;
$primary-invert: $blue-invert;
$family-primary: $family-serif;
$background-dark: $dark;

@import "../../node_modules/bulma/sass/utilities/derived-variables.sass";
$addColors: (
    // here add new input
        newInput = input // and now change the color auf newInput
        $newInput-focus-border-color: none;
);
$colors: map-merge($colors, $addColors);

@import "../../node_modules/bulma/bulma.sass";
@import "../../node_modules/bulma/sass/utilities/initial-variables.sass";
@import "../../node_modules/bulma/sass/utilities/functions.sass";
newInput {
    border: only at the bottom in blue
}
import "bulma";
...
input class="newInput" type="text" value="Type your text here"/>
input class="newInput" type="text" value="Read only modus" readonly />
Mr. Hankey
  • 684
  • 1
  • 2
  • 11

0 Answers0