資訊專欄INFORMATION COLUMN
摘要：項目用經常遇到修改的的顏色的需求，這里來看一下如何用設置原文發布與我的個人博客首先來看一下默認的樣式可以發現，和的默認顏色是有點區別的?，F在我們來修改的顏色不難發現屬性只能改變輸入值的顏色，的顏色沒人任何變化。
項目用經常遇到修改input的placeholder的顏色的需求，這里來看一下placeholder如何用css設置:
原文發布與我的個人博客>>
首先來看一下chrome默認的input樣式
(placeholder)
(input style)
可以發現，placeholder和input的默認顏色是有點區別的?，F在我們來修改input 的顏色
(placeholder)
(input)
不難發現color屬性只能改變輸入值的顏色，placeholder的顏色沒人任何變化。so，如何來改變placeholder的顏色。
要改變placeholder的顏色就要使用到偽類::placeholder
(placeholder)
(input)
需要注意的是::palceholder偽類的兼容性，以上是在chrome瀏覽器的運行結果，同樣的代碼在IE11中就成了這樣
(placeholder - ie11)
(input - ie11)
IE解決方案:
首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder,并且屬性需要加上!important提高優先級。
(placeholder ie11)
(input ie11)
之后給出其他瀏覽器的適配方案
/* - Chrome ≤56,
- Safari 5-10.0
- iOS Safari 4.2-10.2
- Opera 15-43
- Opera Mobile >12
- Android Browser 2.1-4.4.4
- Samsung Internet
- UC Browser for Android
- QQ Browser */
::-webkit-input-placeholder {
color: #ccc;
font-weight: 400;
}
/* Firefox 4-18 */
:-moz-placeholder {
color: #ccc;
font-weight: 400;
}
/* Firefox 19-50 */
::-moz-placeholder {
color: #ccc;
font-weight: 400;
}
/* - Internet Explorer 10–11
- Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
color: #ccc !important;
font-weight: 400 !important;
}
/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
color: #ccc;
font-weight: 400;
}
/* CSS Working Draft */
::placeholder {
color: #ccc;
font-weight: 400;
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114182.html
摘要：項目用經常遇到修改的的顏色的需求，這里來看一下如何用設置原文發布與我的個人博客首先來看一下默認的樣式可以發現，和的默認顏色是有點區別的?，F在我們來修改的顏色不難發現屬性只能改變輸入值的顏色，的顏色沒人任何變化。 項目用經常遇到修改input的placeholder的顏色的需求，這里來看一下placeholder如何用css設置: 原文發布與我的個人博客>> 首先來看一下chrome默認...
摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側換用輸入限制電話位，密碼位根據結構的語義化修改嘗試下再加一 任務四、 一個最常見的移動端頁面 完成的事情 完成簡單布局，然后填充界面 與效果圖對比優化 完成驗收要求：header擴展性 & 頂欄固定 進行p...
摘要：一思考在移動端越來越重要的背景下，每位開發者對移動適配都有自己的想法。這個和移動端的設計體驗方式是比較像的。對移動端的特殊性進行適配，如問題，默認樣式等。 一、思考 在移動端越來越重要的背景下，每位web開發者對移動適配都有自己的想法。是移動優先，還是PC優先，還是兩者兼得？在實際開發中這個問題是和項目產品定位有關的，也涉及到UI的設計，不是開發者能決定。但不管產品如何定位，作為開發...
摘要：自從年提出以來。它就成為一個領先的模塊系統，用來組織你的代碼方式之一。換句話說，你的樣式中盡量不要使用標簽或者標識符。我們必須使用來創建對象，通過在類中調用，將其合在一起。如果你不在刻意在中追求語義化，你仍然可以使用。 自從2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以來。它就成為一個領先的模塊系統，用來組織你的CSS代碼方式之一。 ...
閱讀 2571·2021-08-20 09:38
閱讀 1355·2019-08-30 15:43
閱讀 593·2019-08-29 17:13
閱讀 1601·2019-08-29 14:01
閱讀 1314·2019-08-29 13:29
閱讀 2322·2019-08-23 18:29
閱讀 2047·2019-08-23 17:51
閱讀 1915·2019-08-23 17:16
