Использование CCS для замены текста

Question

Я хотел бы изменить текст водяного знака и кукольный текст в строке поиска. Я хотел бы сделать это с некоторыми CCS. Я знаю, что это не рекомендуется, но я думаю, что это самый быстрый способ.

У меня есть How can I replace text with CSS? и How to use CSS to replace or change text?, но мой случай сложнее.

Я пробовал:

input.search-field.placeholdit.watermark span{ 
display:none !important; 
} 

input.search-field.placeholdit.watermark:after{ 
content: 'TEXT'!important; 
} 

и некоторые другие комбинации с span.screen-reader-text, search-wrapper, search-field.placeholdit. Единственное, что я добился, - это окно окна поиска.

Окно поиска выглядит как на изображении ниже - я хотел бы изменить "Поиск ..." и "Поиск:" текстов:

Код окна поиска:

<div class="search-wrapper"> 
     <form role="search" method="get" class="search-form" action="my.website.com"> 
      <label> 
       <span class="screen-reader-text">Search for:</span> 
       <input type="search" class="search-field placeholdit" value name="s" title="Search for:"> 
      </label> 
      <input type="submit" class="search-submit" value="Search"> 
     </form> 
</div> 

Если есть лучшие способы изменить его, я бы хотел его услышать. Начальные вопросы грубые, но я хотел бы узнать, как правильно изменить веб-страницы.

Answer 1

Не используйте CSS для этого. Просто измените «заполнитель» и «название» атрибуты в вашем HTML:

<input type="search" class="search-field" value="" name="s" placeholder="Search" title="Search for:"> 

Вы должны исправить «значение» атрибута тоже.