Styling Password forget Button

Hi,

i have created a button.css with which i globally change the look of all buttons. That works but also changes the “password forget” button in the Login Form.

How can i style it in another way? Have tried to make it red (just to be sure i have the correct css) but it wont turn red

vaadin-login-form [slot="forgot-password"] {
    color: red; 
    font-size: 14px; 
    font-weight: bold;
    text-decoration: underline; 
    cursor: pointer;
}

vaadin-login-form [slot="forgot-password"]:hover {
    color: #005F73;
    text-decoration: none;
}

Have you tried adding a “vaadin-button” to the [slot…] selector? Haven’t tested it, but maybe your custom styles are more specific than the slot one without the element

Tested it myself now and it seems not to be the selector. At least not, when it is simply

vaadin-button {
    color: green;
}

vaadin-login-form [slot="forgot-password"] {
    color: red;
}

With this my buttons have green text then, except for the forgot button, which is red.

Have you checked via dom tools, if the styles are applied at all and if the order of your styles are maybe wrong? Or do you use an !important at some point?