Как изменить цвет заполнителя на прозрачный с помощью JavaScript - PullRequest
Новая
       6

Как изменить цвет заполнителя на прозрачный с помощью JavaScript

2 голосов
/ 23 сентября 2019

Я пытаюсь изменить цвет заполнителя, но я не могу получить право javascript для вызова элемента, не могли бы вы помочь мне?

Я только изучаю javascript, и я попытался отредактировать его с помощью WYSIWYGредактор, но так как содержимое является динамическим, перестали работать все функции автозаполнения.

HTML 

<input id="search" type="text" name="q" value="" class="input-text" maxlength="128" placeholder="Type here" autocomplete="off">

CSS 

header .navbar .sc-bar #search_mini_form input.input-text

Ответы [ 3 ]

1 голос
/ 23 сентября 2019

Вам не нужен javascript для этого, если у вас нет каких-либо условий, попробуйте добавить классы к входу, а затем выполните команду sass или plain css: 

input#search::placeholder{
color:red;}

с помощью sass: 

input{
&#search{
    &::placeholder{
        color : red
    }
 }
}

в случае, если вы хотите использовать javascript, просто добавьте класс для события click для примера, подобного этому: 

var d = document.getElementById("div1");
d.className += " otherclass";

an then: 

input.otherclass::placeholder{
 color:red;
}
0 голосов
/ 23 сентября 2019

Вы можете использовать этот код 

    <style type="text/css">
        ::-webkit-input-placeholder { /* Chrome */
          color: red!important;
        }
        :-ms-input-placeholder { /* IE 10+ */
          color: red!important;
        }
        ::-moz-placeholder { /* Firefox 19+ */
          color: red!important;
          opacity: 1;
        }
        :-moz-placeholder { /* Firefox 4 - 18 */
          color: red!important;
          opacity: 1;
        }
0 голосов
/ 23 сентября 2019

Я думаю, что нет необходимости использовать JavaScript, вы можете сделать это с помощью CSS.Просто добавьте следующий код в ваш CSS-файл. 

<style>
::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: red;
}
</style>
...