Тип ввода HTML-формы = "пароль" CSS не работает

Я пытаюсь добавить CSS в следующую HTML-форму:

input[type=text],
input[type=password] {
  transition: height 0.4s ease-in-out, width 0.4s ease-in-out, background 0.4s ease-in-out;
  padding: 18px;
  color: dimgray;
}

input[type=text],
input[type=password] :focus {
  animation-name: smooth;
  background-color: #FFD800;
  color: black;
}

<form action = "dashboard.php" autocomplete = "off" method = "POST">

  <br><br>
  <h2 align = "center">Login</h2><br>
  <input type = "password" placeholder = "Username" name = "Username"><br><br>
  <input type = "password" placeholder = "Password" name = "Password"><br><br>
  <input type = "submit" value = "Submit">

</form>

CSS работает для input type = "text", но не для input type = "password". Пожалуйста, порекомендуйте.

Спасибо!

Это не имеет отношения к php , я удалил тег.

— 10.12.2020 08:27

Извините, это лишний код, который я скопировал. Есть предложения по моему вопросу? Спасибо!

— 10.12.2020 08:28

Я бы сказал, что вы плохо организовали свой код

— 10.12.2020 08:29

Можете ли вы быть более описательным для вашей проблемы. Какой css не работает?

— 10.12.2020 08:30

Можете ли вы рассмотреть возможность добавления сниппета?

— 10.12.2020 08:30

html css forms

10.12.2020 08:26

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

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 110

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

Ответы 3

попробуй это

input[type=text],
input[type=password]  {
    transition: height 0.4s ease-in-out, width 0.4s ease-in-out, background 0.4s ease-in-out;
    padding: 18px;
    color: dimgray;
} 

input[type=text]:focus, 
input[type=password]:focus {
    animation-name: smooth;
    background-color: #FFD800;
    color: black;
}

Использование только попытки это не помогает ОП... добавьте какое-нибудь объяснение, пожалуйста

— 10.12.2020 09:31

просто какая-то проблема с интервалом. ничего особенного

— 10.12.2020 15:36

10.12.2020 08:30

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

Проверьте это сейчас, у вас есть ненужное пространство между input[type=text], input[type=password] и :focus, что было проблемой, из-за которой фокус CSS не применялся:

  input[type=text], input[type=password]  {
        transition: height 0.4s ease-in-out, width 0.4s ease-in-out, background 0.4s ease-in-out;
        padding: 18px;
        color: dimgray;
    }
    input[type=text], input[type=password]:focus {
        animation-name: smooth;
        background-color: #FFD800;
        color: black;
    }

<form action = "dashboard.php" autocomplete = "off" method = "POST">
                    
    <br><br><h2 align = "center">Login</h2><br>
    <input type = "password" placeholder = "Username" name = "Username"><br><br>
    <input type = "password" placeholder = "Password" name = "Password"><br><br>
    <input type = "submit" value = "Submit">
            
</form>

Рабочая рабочий пример

Решено! Спасибо!

— 10.12.2020 09:51

Готово, я отметил его как принятый! Спасибо за ваше время!

— 10.12.2020 10:00

10.12.2020 08:30

Во-первых, измените ввод пользователя на тип «текст». Во-вторых, удалите пространство между элементами input[type=text], input[type=password] и :focus с помощью CSS.

  input[type=text], input[type=password]  {
        transition: height 0.4s ease-in-out, width 0.4s ease-in-out, background 0.4s ease-in-out;
        padding: 18px;
        color: dimgray;
    }
    input[type=text]:focus, input[type=password]:focus {
        animation-name: smooth;
        background-color: #FFD800;
        color: black;
    }

<form action = "dashboard.php" autocomplete = "off" method = "POST">
                    
    <br><br><h2 align = "center">Login</h2><br>

    <!--  change type from "password" to "text"  -->
    <input type = "text" placeholder = "Username" name = "Username"><br><br>                                   
    <input type = "password" placeholder = "Password" name = "Password"><br><br>
    <input type = "submit" value = "Submit">
            
</form>

Удаление пробела решило проблему. Спасибо!

— 10.12.2020 09:52

Пожалуйста, отметьте ответ, который решил вашу проблему. Спасибо.

— 10.12.2020 09:59

10.12.2020 09:11