:focus не меняет данные другого элемента

Я хотел сделать ввод только для чтения видимым, когда другой ввод находится в фокусе. Я попробовал css, я не вижу проблем, но все равно он не работает. По сути, когда пользователь сфокусирован, UsernameLabel display:block. Мне удалось это сделать, но удалив уже существующий фокус Username.

Подробности:

Вход только для чтения
Вход
Если ввод: фокус только для чтения, ввод. дисплей: блок

#Container {
            height: 75vh;
            width: 100%;
            background-color: rgb(42, 95, 165);
        }

        .UsernameLabel {
            font-size: 30px;
            color: rgb(255, 255, 255);
            height: 30px;
            width: 75%;
            border-radius: 5px;
            text-align: center;
            background-color: rgb(42, 95, 165);
            position: fixed;
            top: 7.5%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            display: none;
        }

        .Username {
            height: 7.5vh;
            width: 75%;
            border-radius: 5vh;
            border: none;
            background-color: #313131;
            position: fixed;
            top: 15%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            color: white;
            text-align: center;
            font-size: 20px;
        }

        .Username:focus{
            width: 90%;
            margin-top: 30px;
        }
        
        .Username:focus .UsernameLabel{
            display: block;
        }

        #Container2 {
            height: 35vh;
            width: 35vh;
            background-color: #1a1a1a;
            border-radius: 20px;
            position: fixed;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        body {
            margin: 0;
        }

        #InverseRadius {
            height: 10vh;
            width: 100%;
            background-color: #1a1a1a;
            border-radius: 50%;
            margin-top: -5vh;
        }

<body bgcolor = "#1a1a1a">
    <div id = "Container">
        <div id = "Container2">
            <input class = "UsernameLabel" value = "Username" readonly>
            <input type = "text" placeholder = "Username" class = "Username" id = "Username">
        </div>
    </div>
    <div id = "InverseRadius"></div>
</body>

Выполнение фрагмента кода работает правильно, только когда вы нажимаете на всю страницу.

— 15.12.2020 14:53

javascript html css focus

15.12.2020 14:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

попробуй это:

#Container {
            height: 75vh;
            width: 100%;
            background-color: rgb(42, 95, 165);
        }

        .UsernameLabel {
            font-size: 30px;
            color: rgb(255, 255, 255);
            height: 30px;
            width: 75%;
            border-radius: 5px;
            text-align: center;
            background-color: rgb(42, 95, 165);
            position: fixed;
            top: 7.5%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            display: none;
        }

        .Username {
            height: 7.5vh;
            width: 75%;
            border-radius: 5vh;
            border: none;
            background-color: #313131;
            position: fixed;
            top: 15%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            color: white;
            text-align: center;
            font-size: 20px;
        }

        .Username:focus{
            width: 90%;
            margin-top: 30px;
        }
        
        .Username:focus~.UsernameLabel{
            display: block;
        }

        #Container2 {
            height: 35vh;
            width: 35vh;
            background-color: #1a1a1a;
            border-radius: 20px;
            position: fixed;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        body {
            margin: 0;
        }

        #InverseRadius {
            height: 10vh;
            width: 100%;
            background-color: #1a1a1a;
            border-radius: 50%;
            margin-top: -5vh;
        }

<body bgcolor = "#1a1a1a">
    <div id = "Container">
        <div id = "Container2">
            <input type = "text" placeholder = "Username" class = "Username" id = "Username">
            <input class = "UsernameLabel" value = "Username" readonly>
            
        </div>
    </div>
    <div id = "InverseRadius"></div>
</body>

explanation:
the SPACE selector occur only if the last is a descendant of the first.
but in your case he is not descendant and you may use ~ or + selector (and inverse their order in the html)
more here

15.12.2020 15:07

Другие вопросы по теме

Я неправильно использую flexbox? - Ошибка флексбокса в 2 столбцах

Есть ли способ сделать двустороннюю привязку в blazor inputtext динамически

Реагировать: отключить щелчок правой кнопкой мыши на videojs

Получить текст элемента, используя DOM с PHP, но вернуть ошибку

Эффект пульсации для формы сердца css3

Невозможно настроить основное приложение asp.net на полную ширину

Проверка, при которой «ставка» не должна превышать текущий кошелек

Зачем отображать разрывы встроенных блоков, overflow-wrap: break-word

Как сделать так, чтобы высота стола соответствовала размеру экрана?

Разобрать значение html в python

:focus не меняет данные другого элемента

Ответы 1

Другие вопросы по теме

Похожие вопросы