使用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中的"placeholder“和"title”属性：

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

你也应该修改你的"value“属性。