html - 使用 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:">

您也应该修复您的“值”属性。