Форум программистов
 
О проблемах, например, с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Ответ
 
Опции темы
Старый 30.01.2020, 22:30   #1
Foksen
Пользователь
 
Регистрация: 05.10.2019
Сообщений: 10
По умолчанию Как изменить цвет текста в <input>

Недавно начал изучать 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;
}
My name's Pitt, and your ass ain't talking your way out of this shit
Foksen вне форума Ответить с цитированием
Старый 11.02.2020, 23:52   #2
Лубышев
Участник клуба
 
Аватар для Лубышев
 
Регистрация: 23.07.2007
Сообщений: 1,050
По умолчанию

Пока не введен текст используется placeholder вместо него. Текст и placeholder стилизуются по разному. С телефона не могу привести код для стилизации, но гуглите css input placeholrer style
Писано по д'Эльфийски
Лубышев вне форума Ответить с цитированием
Старый 19.02.2020, 14:16   #3
maks1331
Пользователь
 
Регистрация: 20.12.2016
Сообщений: 60
По умолчанию

::-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;
}
maks1331 вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


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


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS