Как убрать серый фон в input и textarea в Internet Exporer

110
06 октября 2019, 17:20

У меня для input и textarea есть собственные стили, убраны все лишние кнопки (стрелки, крестики, границы), и поставлен фон на чисто белый. Во всех браузерах он белый кроме Internet Explorer. Если текстовое поле пустое, то фон затемняется и оно становится серым; если я нажму на текстовое поле либо что-то туда введу, то снова белое. Как убрать это затемнение из Internet Explorer? Подойдут любые способы (css, javascript, jquery, html).

.tex12ie { 
  width: 517px; 
  outline: none; 
  overflow: auto; 
  -webkit-user-select: text; 
  -khtml-user-select: text; 
  -ms-user-select: text; 
  -moz-user-select: text; 
  -o-user-select: text; 
  user-select: text; 
  resize: none; 
  font-family: 'Arial'; 
  border: none; 
  font-size: 18px; 
  -moz-transition: border .35s;  
  -webkit-transition: border .35s;  
  -o-transition: border .35s; 
  transition: border .35s; 
  border-radius: 5px; 
   	  resize: none; 
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  -ms-appearance: none; 
  -khtml-appearance: none; 
  -o-appearance: none; 
}
<textarea id="tex12" maxlength="1000" class="tex12ie" spellcheck="false" name="message" placeholder="Сообщение для технической поддержки" style="box-shadow:inset 0 0 0 200px black; background: #fff; padding-left: 15px; padding-top: 15px; padding-bottom: 15px; height: 200px; display: block; margin-left: 7px; margin-right: 7px"></textarea>

Answer 1

Тут черная для наглядности... Поменяй цвет... Но учти что для IE ниже 9 версии не будет работать

input { 
  box-shadow:inset 0 0 0 20px black; 
}
<input />

Answer 2

Проблема была в том, что Internet Explorer неадекватно реагирует на opacity. Использовать только rgb.

:-webkit-placeholder {
    color: #676767 !important;
}
:-moz-placeholder { 
    color: #676767 !important;
}
:-khtml-placeholder {  
    color: #676767 !important;
}
:-ms-placeholder {  
    color: #676767 !important;
}
:-o-placeholder {  
    color: #676767 !important;
}
:placeholder {  
    color: #676767 !important;
}
::-webkit-placeholder {
    color: #676767 !important;
}
::-moz-placeholder { 
    color: #676767 !important;
}
::-khtml-placeholder {  
    color: #676767 !important;
}
::-ms-placeholder {  
    color: #676767 !important;
}
::-o-placeholder {  
    color: #676767 !important;
}
::placeholder {  
    color: #676767 !important;
}
:-webkit-input-placeholder {
    color: #676767 !important;
}
:-moz-input-placeholder { 
    color: #676767 !important;
}
:-khtml-input-placeholder {  
    color: #676767 !important;
}
:-ms-input-placeholder {  
    color: #676767 !important;
}
:-o-input-placeholder {  
    color: #676767 !important;
}
:input-placeholder {  
    color: #676767 !important;
}
::-webkit-input-placeholder {
    color: #676767 !important;
}
::-moz-input-placeholder { 
    color: #676767 !important;
}
::-khtml-input-placeholder {  
    color: #676767 !important;
}
::-ms-input-placeholder {  
    color: #676767 !important;
}
::-o-input-placeholder {  
    color: #676767 !important;
}
::input-placeholder {  
    color: #676767 !important;
}
READ ALSO
Почему браузер не создает куки с JSSESIONID

Почему браузер не создает куки с JSSESIONID

Делаю POST запрос на сервер, который возвращает ответ с Header: Set-Cookie →JSESSIONID=6D52D8B587133F95A216B7EA656708A6; Path=/; HttpOnlyНо браузер не сохраняет эти куки, нужно...

119
как сделать такой scrollbar?

как сделать такой scrollbar?

начитался, что для создания кастомного скроллбара без jQuery никак, да и к тому же кастомные скроллы - зло, но тз требует, надо выполнять, а как...

121
Камера от третьего лица на Three.js

Камера от третьего лица на Three.js

Всем приветИзучаю на досуге новую для себя тему - three

117