用css更改文本輸入的值？

有沒有辦法用css改變文本輸入的值（顯示的默認文本）？用css更改文本輸入的值？

Im optomizing一個網站的手機，我希望文本'搜索這個網站'縮短爲'搜索'。謝謝

來源

2011-10-06 Evans

你有沒有考慮過使用Javascript功能來檢測用戶的瀏覽器改變域？ http://www.w3schools.com/js/js_browser.asp – Waltzy

@Waltzy - 不檢測瀏覽器本身;這是不好的做法。相反，使用Modernizr等工具檢測瀏覽器的功能;它更可靠，併爲您提供更細緻的控制。有少數情況下瀏覽器檢測是必要的，因爲其他技術不起作用，但這不是其中之一。 – Spudley

@Spudley歡呼聲，我會銘記在心。 – Waltzy

這真的不是CSS的用途。

CSS用於設計您的內容; HTML是針對實際內容本身的。

如果您需要在HTML加載後修改內容，那麼這就是Javascript的用途。

因此，您的問題的真正答案是：或者直接修改HTML，或者使用Javascript。

有一些事情你可以做用CSS影響的內容，如添加在前期的或使用:before和:after僞選擇一個元素後面附加的文字，但不會幫助你這種情況下，不應該用於你正在談論的那種內容更改工作。

順便說一句，有點偏離主題，但如果您將輸入字段值用作提示文本，您可能需要考慮查看HTML5 placeholder屬性。這也不能解決你的問題，但它聽起來可能是對你有用的東西。

來源

2011-10-06 09:52:17 Spudley

好吧，如果你*完全忽略了CSS的'content'屬性，我想這是真的。 –

@RubenMartinezJr .:我沒有忽略'content';它只適用於像'：before'這樣的選擇器，並且在答案中。但問題是，即使你可以做到這一點，你也不應該：將重要內容放入CSS是一種不好的做法。它混淆了CSS設計的風格和內容之間的分離，並且它對最終用戶有可用性問題（例如，它不能被複制+粘貼，不會被盲人用戶的屏幕閱讀器讀取等）。底線是'：before'和'：after'中的'content'屬性只能用於現場效果，而不能用於實際的網站內容。 – Spudley

不，CSS不能更改input的value屬性，或者任何元素的任何屬性。

來源

2011-10-06 09:41:10 thirtydot

如果要更改值，請使用HTML「value」屬性;

例如：

<input type="submit" value="ENVIAR">

，將改變默認的「提交」內element:before值「投遞」

來源

2013-08-03 22:59:56 Edikyutter

遲到了，但使用「內容」屬性，將完成你所需要的所見在http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_string

我能夠操縱通過jQuery toggleClass按鈕含量值，以下類之間切換：

.open_button:before{ 
    content:"open"; 
} 
.close_button:before{ 
    content: "close"; 
}

我明白了這個問題，但我確實認爲toggleClass提供了一種可以證明CSS技巧的優雅。否則，人們將使用具有嵌套css開關功能的切換功能。我個人認爲避免嵌套的jQuery函數更好看。

來源

2015-01-12 08:39:08

對我來說，解決辦法是

<button type="submit" class="mybutton" name="add"> 
    <span class="add">Add new</span> 
</button>

因此CSS將是：

.mybutton:hover .add:after{content="0"}

來源

2015-08-20 14:44:48 laura

-3

那麼容易，只是舉例鍵入：

button { 
 
color: red; 
 
font-family: sans-serif; 
 
}

有你，按鈕把所有的投入與例如提交/ RESET/.etc值..

來源

2016-06-18 16:54:55

他不想更改顏色和字體。 –

該解決方案是有點棘手，

，但它總是爲我工作。

/*CSS Code*/ 
 

 
@media screen and (max-width: 768px) { 
 
.showondesktop { 
 
display: none !important; } 
 
} 
 

 
#showonmobile { 
 
    display:none; 
 
} 
 
@media screen and (max-width: 767px) { 
 
    #showonmobile { 
 
display:block; } 
 
}

<!--HTML Code-> 
 

 
<div class="showondesktop"> search this site </div> 
 

 
<div id="showonmobile"> search </div>

當網站從手機訪問它會顯示「搜索」，但是從桌面訪問時，它會顯示「搜索這個網站」。

圖像預覽：

Output-Desktop-view.jpg

Output-Mobile-view.jpg

來源

2018-02-17 23:31:43 Taufan

用css更改文本輸入的值？

回答

相關問題