Svelte ListItem Input Color

1

Hi,

I have been trying to set the color of a ListItem.

<ListInput
        outline
        label="First Name"
        type="text"
        required
        validate
        clearButton
        borderTheme="red"
        textColor="red">
    </ListInput>

It does not seem to work in the default template app as well.

Am I doing it wrong?

2

Hello,

you have to change the css class color. You can do that by adding this code to your app.css at the end of the file.

.list input[type=“text”]::placeholder, .list input[type=“password”]::placeholder, .list input[type=“search”]::placeholder, .list input[type=“email”]::placeholder, .list input[type=“tel”]::placeholder, .list input[type=“url”]::placeholder, .list input[type=“date”]::placeholder, .list input[type=“month”]::placeholder, .list input[type=“datetime-local”]::placeholder, .list input[type=“time”]::placeholder, .list input[type=“number”]::placeholder, .list select::placeholder {
color: rgb(0,255,0);
}

3

Sorry for the late response.

I dont think I was clear enough.

Im trying to set the Label and border of my textbox to red, but it does not work.

4

I was able to set the Label color in css, but cant see how to set the outline border.

.my-required-field .item-label {

color: rgb(255, 0, 0);

}

5

change this --f7-input-outline-border-color in the app.css example attached

:root {
–f7-theme-color: #105aa5;
–f7-theme-color-rgb: 16, 90, 165;
–f7-theme-color-shade: #0c4680;
–f7-theme-color-tint: #146eca;
–f7-input-outline-border-color: #00ff00;
}

6

@MiguelO
Is there a way to make a ListInput outline and still have only a white background inside the textfield ?
This is my code:

<List strongIos dividersIos insetIos >
        <ListInput outline label="Player 1" type="text" />
</List>

In my case the whole width of the webpage is white and not only the inside of the ListInput