Как стилизовать кнопку «Показать/укрытие» на странице входа в систему ⇐ CSS

[Anonymous]

Я делаю страницу входа в систему с Vue/Nuxt 3. Я сделал основную форму, но у меня возникли проблемы с кнопкой «Show/Hide Password». Основная форма отображается: flex; и glex-направление: Column; , который работает отлично для всех основных входов, но я хочу Ввод пароля, и я не могу обойти это. Я попытался поместить кнопку «Введия и показывать/скрыть» в Div с дисплеем: flex; и glex-направление: row; , но это просто выталкивает ввод вне линии слева.
Вот код для компонента входа в систему: < /p>

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

Login Or Continue To Account
[h4]Login to your account using the form below, or continue to a currently logged in account.[/h4]



Albany
Walnut Creek
















Login







import { useTildenRedisignStore } from '~/stores/tildenRedisign';
import { ref } from 'vue';

const tildenRedisign = useTildenRedisignStore();
const username = ref('');
const password = ref('');
const showPassword = ref(false);

function Login() { // Function to log in to account

};

tildenRedisign.setTitle('Login To Your Account'); // Title and header setting

useHead({
title: 'Login - Tilden Portal'
});



.box {
margin-top: 5%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 5%;
width: 80%;
}

.flex {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}

.login-input {
height: 5vh;
width: 35%;
margin-bottom: 5%;
}

#toggle-button {
display: flex;
height: 5%;
margin-bottom: 5%;
width: 10%;
justify-content: center;
align-items: center;
}

Любая помощь будет очень оценена.


Подробнее здесь: https://stackoverflow.com/questions/794 ... login-page