首頁 web前端 html教學 修改輸入框placeholder文字預設顏色-webkit-input-placeholder方法_HTML/Xhtml_網頁製作

修改輸入框placeholder文字預設顏色-webkit-input-placeholder方法_HTML/Xhtml_網頁製作

May 16, 2016 pm 04:36 PM
input placeholder webkit 輸入框

html5為input新增了原生的佔位符屬性placeholder,進階瀏覽器都支援這個屬性,例如:

預設的placeholder字體顏色是呈現淺灰色,如果想改變這個預設顏色,解決方案如下:

XML/HTML Code複製內容到剪貼簿
  1. input:-moz-placeholder,   
  2. textarea:-moz-placeholder {   
  3.     color: #999999;   
  4. }   
  5.   
  6. input:-ms-input-placeholder,   
  7. textarea:-ms-input-placeholder {   
  8.     color: #999999;   
  9. }   
  10.   
  11. input::-webkit-input-placeholder,   
  12. textarea::-webkit-input-placeholder {   
  13.     color: #999999;   
  14. }  

以上這篇修改輸入框placeholder文字預設顏色-webkit-input-placeholder方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

原文網址:http://www.cnblogs.com/xjuan/p/5436037.html

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1663
14
CakePHP 教程
1420
52
Laravel 教程
1313
25
PHP教程
1266
29
C# 教程
1239
24
laravel input隱藏域怎麼實現 laravel input隱藏域怎麼實現 Dec 12, 2022 am 10:07 AM

laravel input隱藏域的實作方法:1、找到並開啟Blade模板檔案;2、在Blade模板中使用method_field方法來建立隱藏域,其建立語法為「{{ method_field('DELETE') }}」。

vue3怎麼封裝input元件和統一表單數據 vue3怎麼封裝input元件和統一表單數據 May 12, 2023 pm 03:58 PM

準備工作用vuecreateexample建立項目,參數大概如下:用原生input原生的input,主要是value和change,資料在change的時候需要同步。 App.tsx如下:import{ref}from'vue';exportdefault{setup(){//username就是資料constusername=ref('張三');//輸入框變化的時候,同步資料constonInput=;return( )=>({

點選input框沒有遊標怎麼辦 點選input框沒有遊標怎麼辦 Nov 24, 2023 am 09:44 AM

點選input框沒有遊標的解決方法:1、確認輸入框焦點;2、清除瀏覽器快取;3、更新瀏覽器;4、使用JavaScript;5、檢查硬體設備;6、檢查輸入框屬性;7、調試JavaScript程式碼;8、檢查頁面其他元素;9、考慮瀏覽器相容性。

使用jQuery實作輸入框僅允許輸入數字和小數點 使用jQuery實作輸入框僅允許輸入數字和小數點 Feb 26, 2024 am 11:21 AM

實作jQuery輸入框限制數字和小數點輸入在Web開發中,我們常常會遇到需求需要控制使用者在輸入框中輸入的內容,例如限制只能輸入數字和小數點。這種限制可以透過JavaScript和jQuery來實現。以下將介紹如何使用jQuery實作輸入框限制數字和小數點輸入的功能。一、HTML結構首先,我們需要在HTML中建立一個輸入框,程式碼如下:

實作CSS ::placeholder偽元素選擇器的多種應用場景 實作CSS ::placeholder偽元素選擇器的多種應用場景 Nov 20, 2023 pm 03:17 PM

實作CSS::placeholder偽元素選擇器的多種應用場景,需要具體程式碼範例在Web開發中,CSS是一種常用的樣式表語言,用於控制網頁的佈局和樣式。而::placeholder偽元素選擇器則是CSS3新增的一種選擇器,用來修改輸入框(包含文字輸入框、密碼輸入框等)的佔位符樣式。以下將為大家介紹多種應用場景,並提供對應的程式碼範例。修改輸入框佔位符的顏色:

如何使用 Vue 實現標籤的輸入框? 如何使用 Vue 實現標籤的輸入框? Jun 25, 2023 am 11:54 AM

隨著Web應用的發展,標籤的輸入框越來越受歡迎。這種輸入框可以讓使用者更方便輸入數據,同時也方便使用者對已輸入的數據進行管理和搜尋。 Vue是一款非常強大的JavaScript框架,它可以幫助我們快速實現帶有標籤的輸入框。本文將介紹如何使用Vue實作標籤的輸入框。第一步:建立Vue實例首先,我們需要在頁面上建立Vue實例,程式碼如下:&l

Vue開發中輸入框長度限制的最佳化方法是什麼? Vue開發中輸入框長度限制的最佳化方法是什麼? Jun 30, 2023 am 08:44 AM

如何最佳化Vue開發中的輸入框輸入長度限制問題引言:在Vue開發過程中,輸入框長度限制是一個常見的需求。限制使用者在輸入框中輸入的字元數有助於保持資料的準確性、優化使用者體驗以及提高系統的效能。本文將介紹如何最佳化Vue開發中的輸入框輸入長度限制問題,以提供更好的使用者體驗和開發效率。一、使用v-model指令綁定輸入框值在Vue開發中,我們通常使用v-model指

Vue文檔中的input框回車事件和驗證函數使用方法 Vue文檔中的input框回車事件和驗證函數使用方法 Jun 20, 2023 am 09:13 AM

Vue是一個流行的JavaScript前端框架,它的核心是響應式資料綁定和元件系統。在Vue的應用程式中,input框是最常用的UI元素之一。在使用者輸入文字時,我們希望可以監聽回車事件,並且在提交前對輸入內容進行驗證。本篇文章將介紹Vue文件中的input框回車事件和驗證函數使用方法。一、Vue中input框回車事件在Vue中監聽input框的回車事件非常簡

See all articles