使用CCS替換文字

我想在我的搜索欄上更改水印文本和小心文字。我想用一些CCS來做。我知道它不推薦，但我認爲這是最快的方法。使用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>

如果有更好的方法來改變它，我想聽聽它。起點很粗糙，但我想了解如何正確更改網頁。

來源

2017-01-22 ppi0trek

你有沒有聽說過'placeholder'屬性？ –

@MrLister我有，但沒有佔位符attribiute在代碼中，所以我認爲它不使用在這種情況下？ – ppi0trek

不要爲此使用CSS。只需更改HTML中的「佔位符」和「標題」屬性：

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

您應該修正「value」屬性。

來源

2017-01-22 19:55:09 shipshape

[HTML5佔位符屬性不能替代標籤元素]（http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/） – Quentin

感謝@shipshape。我正在使用tesseract主題。我沒有製作這個網頁。任何想法在哪裏可以找到整個主題包中的這一行？我嘗試了標題和樣式，但只有一些參考。是否有共同的文件來存儲這些信息？我在瀏覽器上從檢查頁面功能獲取代碼。 – ppi0trek

使用CCS替換文字

回答

相關問題