Все внутри тега mat-form-field непобедимо в Angular CLI версии 16 с использованием пакета @angular/material ⇐ CSS

[Anonymous]

Вот как сайт выглядит при загрузке:




Каждый раз, когда я нажимаю на один из поля формы, это происходит, но я не знаю, как и почему это происходит, я пытался проверить элемент, но все равно безрезультатно:


Вот HTML-код:

Код: Выделить всё

Login as {{ userRole | titlecase }}





Username




Password

{{hide ? 'visibility' : 'visibility_off'}}



Authentication Id



Log In

и вот CSS-код:

Код: Выделить всё

form {
max-width: 400px; /* Set a max width for the form */
}

.form-group {
display: flex;
align-items: center;
margin-bottom: 10px; /* Add spacing between fields */
}

label {
flex: 1; /* Make the label take up one part of the row */
text-align: right; /* Align text to the right */
margin-right: 10px; /* Add spacing between label and input */
}

input {

margin-bottom: 20px;
border-color: blueviolet;
border-radius: 5px;
height: 25px;
width: 150%;
}

button {
height: 30px;
width: 100px;
background-color: chartreuse;
border-radius: 15px;
border: none;
font-weight: bold;
cursor: pointer
}

hr {
margin-bottom: 50px;
}

form {
width: 100%;
cursor: pointer;
align-items: center;
}

.form-container {
display: flex;
flex-direction: column;

.mdc-text-field {
background-color: blue !important;
}
}

.form-container > * {
width: 100%;

.mdc-text-field {
background-color: rgb(255, 255, 255) !important;
}

.mat-mdc-form-field-ripple::before {
opacity: 1 !important; /* Ensure the line is always visible */
background-color: rgba(0, 0, 0, 0.42) !important; /* Optional: Adjust color for better visibility */
}
}

.container {
width: 100%;
display: flex; /* Make it a flex container */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
}

.mat-mdc-raised-button {
background-color: rgb(0, 115, 255) !important;

.mdc-button__label {
color: white;
}

}

.mdc-text-field {
background-color: rgb(255, 255, 255) !important;
}

Изначально форма «Поле» имела серый фон, но вместо этого я изменил его на белый. Я до сих пор не могу определить стили для других элементов в форме, поэтому я могу изменить их цвета как ну.

Подробнее здесь: https://stackoverflow.com/questions/792 ... ion-16-usi