Как изменить цвет текста в <input> - HTML и CSS

Foksen · 30.01.2020, 21:30

Недавно начал изучать HTML, наткнулся в тырнетах на видео какого-то челика, он там делал строку поиска. Пытался повторить, но чёт немножечко не получилось.
1. В поле ввода текст тёмный, хотя я указывал ему светлый цвет. Но когда начинаешь вводить что-то, он становится нормальным.
2. В полноэкранном режиме всё норм, но когда сворачиваешь окно иконка почему-то вылезает.

У кого-нибудь есть идеи?

Desktop Screenshot 2020.01.30 - 21.27.29.08.jpg

Desktop Screenshot 2020.01.30 - 21.27.39.08.jpg

Desktop Screenshot 2020.01.30 - 21.27.46.04.jpg

Код:

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="style.css">
      <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
      <title>Awesome Search Box</title>
   </head>
   <body>
       <div class="search-box">
       <input type="text" name="" class="search-txt" placeholder="Введите адрес"/>
       <a class="search-btn" href="#">
       <img src="icon.png" width="38" height="38" alt="Icon"/>
       </a>
     </div>
   </body>
</html>

Код:

body {
 margin: 0;
 padding: 0;
 background: #f7f7f7;
}

.search-box {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: #f8fafd;
 height: 82px;
 border-radius: 82px;
 padding: 10px;
 box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.search-box:hover > .search-txt {
 width: 600px;
 padding: 0 6px;
 margin-left: 20px;
}

.search-btn {
 float: right;
 width: 82px;
 border-radius: 50%;
 background: none;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: 0.4s;
 color: #bac8f5;
 cursor: pointer;
 margin-top: 21px;
}


.search-txt {
 border: none;
 background: none;
 outline: none;
 float: left;
 padding: 0;
 color: #d9d9d9;
 font-size: 24px;
 transition: 0.4s;
 line-height: 80px;
 width: 0px;
}

Лубышев · 11.02.2020, 22:52

Пока не введен текст используется placeholder вместо него. Текст и placeholder стилизуются по разному. С телефона не могу привести код для стилизации, но гуглите css input placeholrer style

maks1331 · 19.02.2020, 13:16

::-webkit-input-placeholder { /* Chrome */
color: red;
}
:-ms-input-placeholder { /* IE 10+ */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: red;
}

11.02.2020, 22:52	#2
Лубышев Участник клуба Регистрация: 23.07.2007 Сообщений: 1,054	Пока не введен текст используется placeholder вместо него. Текст и placeholder стилизуются по разному. С телефона не могу привести код для стилизации, но гуглите css input placeholrer style Писано по д'Эльфийски

19.02.2020, 13:16	#3
maks1331 Форумчанин Регистрация: 20.12.2016 Сообщений: 270	::-webkit-input-placeholder { /* Chrome / color: red; } :-ms-input-placeholder { / IE 10+ / color: red; } ::-moz-placeholder { / Firefox 19+ / color: red; } :-moz-placeholder { / Firefox 4 - 18 */ color: red; } формошлеп.рф witech.su

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как изменить цвет текста в CStatic?	erslgoeirjh	Visual C++	0	07.06.2018 09:28
[РЕШЕНО] Как у ссылки изменить расстояние от текста до подчёркивающей линии, а также цвет, толщину и цвет?	Lolopop12	HTML и CSS	2	05.06.2017 02:13
ListView. Изменить цвет текста SubItems[0]	Shouldercannon	Общие вопросы Delphi	3	04.03.2015 21:20
Ассемблер(изменить цвет текста на белый)	zhayr	Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM	1	20.12.2014 06:58
Изменить цвет текста кодом	Legionevil	Microsoft Office Excel	2	25.09.2011 18:11