2. 程式人生 > >設定input 中placeholder的樣式

設定input 中placeholder的樣式

阿新 • • 發佈：2018-12-12

一、效果 在這裡插入圖片描述 二、程式碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
			color: red;
		}
		::-moz-placeholder { /* Firefox 19+ */  
			color: red;
		}
		:-ms-input-placeholder { /* IE 10+ */ 
		 color: red;
		}
		:-moz-placeholder { /* Firefox 18- */ 
		 color: red;
		}
	</style>
</head>
<body>
	名字：<input type="" name="" placeholder="我是一個測試">
</body>
</html>

三、HTML input placeholder支援的屬性

  1. font properties
  2. color
  3. background properties
  4. word-spacing
  5. letter-spacing
  6. text-decoration
  7. vertical-align
  8. text-transform
  9. line-height
  10. text-indent
  11. opacity

eg1、 效果 在這裡插入圖片描述 程式碼：

input::-webkit-input-placeholder {
		   padding-left:30px;
		   opacity:0.5;
		}

剩下的大家自己去測哈~

相關推薦

設定input中placeholder的樣式（placeholder設定字型）

方法： 程式碼示例： 1 .input::-webkit-input-placeholder { 2 font-size: 3.73333333vw; 3 color: #cccccc; 4 } 5 .input:-moz-placeholder { 6 font-size:

設定input 中placeholder的樣式

一、效果 二、程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl

javascript每日進階1--修改input中placeholder的文字顏色

專案中經常會遇到要自定義input框中placeholder的文字的樣式的問題，這篇文章用來總結下 input::-webkit-input-placeholder{ /* WebKit browsers */ color: #c2c2c2;

如何更改input中placeholder的顏色

示例： 更改前： 更改後： 在我們經常寫input時，我們一般都是使用placeholder的顏色，但是看起來真的很戳，當美工給我們設計了一個精美的input背景時，placeholder的內容就很難看清楚，我們就要對其進行更改顏色。 但是我們對input的color

css_day05_修改input中placeholder的預設屬性

一點一點地積累，慢慢地你會得到你想要的東西，為自己而加油吧！ 修改input中placeholder的預設樣式 <html> <head> <

獲取input type=file的檔名及input type=file獲取檔名的瀏覽器,設定input type=file樣式

獲取input type=file的檔名方法：        let filePath = $("input[type = 'file']").val();        //獲取路徑        let urlArr = filePath.split("\\");    

設定input 的 checkbox樣式

幾千個icon支援 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>自定義選擇按鈕</title><style type="te

設定input file的樣式

原理:通過三個input代替一個input file的樣式. 程式碼: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

js下讀取或者設定input中的value值

讀取或者設定input中value值得兩種方式： document.getElementById(”).value有些瀏覽器獲取不到，很奇怪有時候又能獲取到，估計是瀏覽器相容問題。 eval(doc

移動端 華為手機 input中placeholder垂直居中失效

為一個app寫了一個巢狀的提現頁面，效果如下圖 input給定寬高，給了line-heigh，在瀏覽器檢視效果正常，placeholder內容以及游標顯示都是垂直居中的， IOS顯示正常， Andr

設定input標籤的placeholder的樣式

設定input樣式程式碼： input::-webkit-input-placeholder{ /*WebKit browsers*/ color: red; } input::-moz-input-placeholder{ /*Mozilla Firefox*/ color: red; } i

修改 input中的placeholder的字型樣式和顏色

placeholder屬性是css3中新增加的屬性， 由於是新加入的屬性因此對各大瀏覽器都不相容： 因此在使用的時候要加相容性   　　火狐:-moz-placeholder { /* Mozilla Firefox 4 to&nb

CSS設定input placeholder文字的樣式

當然我們今天討論的不是placeholder這個屬性，而是設定placeholder的文字樣式的選擇器。 火狐和webkit核心瀏覽器的屬性名字不一樣，誰叫不是一個娘生的呢。 /* webkit 瀏覽器*/#field1::-webkit-input-placeholder { color:#00

常用 更改input的placeholder顏色和滾動條樣式更改

mar track AR padding color DC scrollbar kit AD /*更改input的placeholder顏色*/ input::-webkit-input-placeholder, textarea::-webkit-input-place

React Native 中為IOS和Android設定不同的Style樣式,一套程式碼解決雙端顯示

React Native 開發中，大多數的元件都是IOS和Android通用的，包括大量的功能性程式碼，至少有80%以上的程式碼可以複用，而剩下的一些元件樣式/少量的程式碼會需要區分雙端，但是為了這少量的程式碼把IOS和Android完全區分這明顯不合適，程式碼複用性下降，程式碼維護量上升

移動端input中的placeholder屬性垂直

今天做專案時發現，在手機端用placeholder時，Android手機可以垂直顯示；ISO則不能使placeholder垂直;解決辦法： .gcddfadf-con-pay-1 input::-webkit-input-placeholder{ font-size:0.3rem; line-height:

input框placeholder顏色設定

.upLoadInfo input::-webkit-input-placeholder{ color: #917449; } .upLoadInfo input:-ms-input-placeholder{ color: #917449; } .upLoadInfo input::

react中使用antdesign中form元件，動態設定Input的值

問題： 在使用Antdesign的form元件時，通過initialValue來設定Input的值，在form未驗證之前，可以通過initialValue來對input賦值，但是form驗證之後，雖然state中存在值，但是不能在input中顯示，form也不能再次提交，程式碼如下所示：

修改指定的input框，textarea的placeholder樣式

修改全域性的input，textarea的placeholder樣式 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {     color: #b3b3b3; }input:-m

react專案中使用antd的form元件，動態設定input框的值

問題： 建立賬號時，輸入賬號後不搜尋直接儲存，提示查詢後，再點搜尋就不能搜尋這個賬號了 原因： 點選儲存之後，對錶單進行了驗證，導致之後請求的資料無法在更新到input框中，也就是說即使在state中有值，也不會更新initialValue值，就導致搜尋後的值不能正