大家好，今天來(lái)為大家分享placeholder顏色的一些知識(shí)點(diǎn)，和男生對(duì)女生說(shuō)placeholder的問(wèn)題解析，大家要是都明白，那么可以忽略，如果不太清楚的話可以看看本篇文章，相信很大概率可以解決您的問(wèn)題，接下來(lái)我們就一起來(lái)看看吧！

input text的邊框如何修改

關(guān)于input輸入框?yàn)g覽器會(huì)有自帶的樣式，如何修改input輸入框的樣式和點(diǎn)擊時(shí)的樣式方法如下。

1、html的寫法，有一個(gè)input文本框和一個(gè)inputtype=button的按鈕。

2、input的基本樣式書寫，placeholder的樣式也可以修改，主要去掉原有的input樣式，加入自己的樣式。

3、點(diǎn)擊時(shí)，input輸入框樣式改變，可以為點(diǎn)擊時(shí)加入動(dòng)畫，點(diǎn)擊輸入框時(shí)有陰影和顏色。

涉及到的知識(shí)點(diǎn)：

1placeholder的樣式修改,text-indent控制文字距離

2input邊框的樣式修改，去掉原有樣式

3點(diǎn)擊時(shí)邊框顏色和陰影的變化box-shadow內(nèi)發(fā)光樣式貌似比較好看

4點(diǎn)擊時(shí)會(huì)有動(dòng)畫加入

怎么樣設(shè)置input里面color屬性值的默認(rèn)顏色

input::-ms-input-placeholder{text-align:center;color:red}input::-webkit-input-placeholder{text-align:center;color:red}input::-moz-placeholder{text-align:center;color:red}

強(qiáng)大利用JS應(yīng)用的Javascript網(wǎng)格插件有哪些呢

工具類

方便操作對(duì)象，數(shù)組等的工具庫(kù)

underscore.js

lo-dash與underscore.js的api基本一致。與underscore比其優(yōu)勢(shì)是，效率高；可自定義構(gòu)建

Sugar在原生對(duì)象上增加一些工具方法

functional.js提夠了一些Curry的支持

Watch.js監(jiān)視對(duì)象或?qū)傩缘淖兓?/p>

bacon.js函數(shù)式編程，cool

streamjs用流的方式來(lái)對(duì)數(shù)組，對(duì)象進(jìn)行系列操作

異步流程控制

eventproxy樸靈出品

Arbiter.js詳細(xì)

發(fā)布訂閱

qPromise風(fēng)格的

Async.js

mock

Mock.js生成隨機(jī)數(shù)據(jù)和mockAjax請(qǐng)求

jquery-mockjaxmockajax請(qǐng)求

時(shí)間庫(kù)

moment

datejs

瀏覽器探測(cè)

Bowser探測(cè)具體瀏覽器和版本

ua-parser-js探測(cè)具體瀏覽器和版本，操作系統(tǒng)，設(shè)備類型等

調(diào)試

console-polyfill能放心的使用console.log()之類的console方法

log讓控制臺(tái)輸出的log有樣式

Konsole.js在頁(yè)面的一個(gè)元素里輸出log信息詳細(xì)

uri.jsuri操作

cookie增刪改cookie的工具庫(kù)

director前端路由庫(kù)詳細(xì)

BigDecimal.js提高精度的數(shù)字操作

JSDoc根據(jù)javascript文件中注釋的信息，生成API文檔詳細(xì)

hotkeys鍵盤事件的封裝

MD5用MD5的方式加密文件的庫(kù)

瀏覽器增強(qiáng)類

讓一些舊瀏覽器變牛逼的庫(kù)

Selectivizr讓IE6-8一些的css3選擇器

ieBetter讓ie6-8有高級(jí)瀏覽器的特性

ExplorerCanvas讓IE8-的瀏覽器支持canvas

CSS3Pie讓IE6-9支持border-radious,box-shadow,linear-gradient?？梢允褂?htc文件（注意Minetype）或.js文件。在用Pie.js時(shí)，box-radious的元素有背景色時(shí)，不顯示背景色。。。

formFive讓舊的瀏覽器支持HTML5表單的一些特性，如placeholder,autofocus

https://github.com/anselmh/object-fit讓瀏覽器支持object-fit這css規(guī)則

HTML5CrossBrowserPolyfills一堆Polyfills

flexibility讓舊的IE也支持Flexbox

選擇器增強(qiáng)

Lining.js讓瀏覽器實(shí)現(xiàn)類似::nth-line(),::nth-last-line()的效果

未歸類

prefixfree用了它，寫css時(shí)，就不需要加瀏覽器的前綴了

表單類

jquery-file-upload上傳文件組件詳細(xì)

zTree文件樹形視圖控件

Treed樹編輯器。感覺(jué)展示的感覺(jué)很像思維導(dǎo)圖

FileAPI對(duì)文件選擇框內(nèi)的文件的一些處理

表單驗(yàn)證

.Validate詳細(xì)

jQuery-Validation-Engine

表單元素美化

uniform提供對(duì)下拉框，單，復(fù)選框，按鈕等表單元素的美化

select2多選下拉框

selectivity和unfirom比較類似

DropKick下拉框，單，多選。外觀比uniform好

switcheryios7風(fēng)格的開關(guān)組件

nouislider用滾動(dòng)條來(lái)設(shè)置/控制（音量等）

range.css美化input[type=range]元素的外觀

圖片類

holderjs生成占位圖片

lazyload

imagesLoaded選取的圖片都加載好后執(zhí)行調(diào)回

CSSgram用CSS3的Filter實(shí)現(xiàn)Instagram濾鏡的庫(kù)

圖標(biāo)類

IconFont匯總

SVG做的圖標(biāo)

svgicons

iconic

HYBICON帶交互效果。如hover,click

HTML字符實(shí)體圖標(biāo)

http://www.amp-what.com/

transformicons圖標(biāo)點(diǎn)擊時(shí)，會(huì)有一些變換效果。如，加號(hào)變成叉號(hào)

css3patternscss3做的可平鋪紋理。瀏覽器兼容性不好。

瀏覽圖片

fancybox彈出查看圖片，視屏等等demo

yoxview彈出查看圖片，圖片尺寸縮放很自然

圖片墻

wookmark

UI框架

WeUI由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信Web開發(fā)量身設(shè)計(jì)。

Framework7

UI組件類

拖拽

dragula支持Draggable，Dropable和Sortable。感覺(jué)比jqueryUI的輕量級(jí)，好用的樣子

angular-draguladragular官方的angular版本

數(shù)據(jù)可視化(圖表)

Echarts百度出品

highcharts功能強(qiáng)大。是收費(fèi)的。

Plottable.JS基于D3的一個(gè)圖表庫(kù)

flot文檔不給力

chartJs中文文檔demo很漂亮，很清晰。比較輕量級(jí)。

ichartJs中國(guó)的一個(gè)家伙搞的，感覺(jué)還不錯(cuò)。

時(shí)間選取組件

foundation-datepicker

DatePicker一個(gè)簡(jiǎn)單的日歷詳細(xì)

fullcalendar支持脫放的方式來(lái)改變待辦事宜的時(shí)間

SimpleEventsCalendar外觀很喜歡。收費(fèi)5$

jQueryuidatepicker經(jīng)典，不是很好看

pickadate輕量級(jí)，手機(jī)友好的，漂亮。但貌似只能在彈出層中顯示，而沒(méi)有下拉這種方式顯示。

zebra-datepicker可配置性很強(qiáng)。但貌似只能在彈出在右上方。。。

bootstrap-datepickerbootstrap風(fēng)格。

dateRangePicker選取時(shí)間段。bootstrap風(fēng)格。該組件依賴TwitterBootstrap,Moment.js和jQuery.

自定義滾動(dòng)條

perfectscrollbar輕量級(jí)的滾動(dòng)條。外觀與mac上chrome的滾動(dòng)條一樣。

iscroll在移動(dòng)設(shè)備上用不錯(cuò)

加載(Loding)效果

CSSSpinnersCSS做的

Loaders.cssCSS做的

表格組件

jsGridDataGrid。詳細(xì)

backgrid基于Backbone.js的DataGrid

excellentexport把表格的內(nèi)容生成excel。兼容Firefox,Chrome,IE6+

datatables表格可交互（對(duì)內(nèi)容進(jìn)行排序，刪除等）

handsontable生成Excel外觀的數(shù)據(jù)

JSpreadsheets表格數(shù)據(jù)的組件庫(kù)

選取顏色

Spectrum

分享到SNS

JiaThis生成分享代碼。

編輯器

ace代碼編輯器，可以用來(lái)做demo演示

ckeditor

ueditor百度做的

tinymce對(duì)html內(nèi)容進(jìn)行實(shí)時(shí)的編輯

summernote在移動(dòng)設(shè)備上用不錯(cuò)

通知組件

notie.js

HTML5播放器

jwplayer被大量網(wǎng)站使用

html5media簡(jiǎn)單的h5player，輕量級(jí)

jplayer功能強(qiáng)太，可換膚

展示

Impress.js各種旋轉(zhuǎn)，和奇特的體驗(yàn)

fullPage全屏顯示。用滾輪來(lái)翻頁(yè)詳細(xì)

zepto.fullpage專注于移動(dòng)端的fullPage.js，依賴Zepto

pagePiling和fullPage類似

turn.js做一本書，帶漂亮的翻頁(yè)的效果

幻燈

slidesjs挺好用的，只是那幻燈導(dǎo)航的CSS都要自己寫，呵呵詳細(xì)

iSlider無(wú)任何插件依賴的手機(jī)平臺(tái)javascript滑動(dòng)組件詳細(xì)

bgstretcher全屏幻燈，會(huì)隨著頁(yè)面大小的變化而變化。

Swiper開源、免費(fèi)、強(qiáng)大的移動(dòng)端觸摸滑動(dòng)插件Swiper中文網(wǎng)

coin-slider兼容IE6。蠻好的~。不過(guò)其切換方式是一塊塊的。不能配置切換方式。。。

wowslider幻燈切換時(shí)各種很炫的效果。收費(fèi)。

cycle2普通的幻燈，竟然不支持垂直滾動(dòng)。。。

jcarousel普通的幻燈，不兼容IE6

reveal3d滾動(dòng)。做ppt相當(dāng)不錯(cuò)

nodePPT國(guó)人做的，做ppt也相當(dāng)不錯(cuò)。有些方面比reveal做的還好。但生成導(dǎo)出的html有些問(wèn)題

roundabout3d切換，看的后面圖片的邊

彈出框

Magnific-Popup兼容PC，Mobile。還不錯(cuò)，有5k+的star

layer國(guó)人開發(fā)的，兼容ie6+。不喜歡其調(diào)用方式。

動(dòng)畫效果

mixitup用漂亮的動(dòng)畫效果來(lái)完成排序和篩選

jQuery.Marquee跑馬燈效果

quickflip卡片翻轉(zhuǎn)效果

卡片翻轉(zhuǎn)效果2兼容性可以。寫的比較簡(jiǎn)單：1，只支持x方向翻轉(zhuǎn)2,類名都是規(guī)定好的3，只能被調(diào)用一次。需要改寫一下。我的改進(jìn)版見(jiàn)這里

TheaterJS模擬兩個(gè)人在屏幕上對(duì)話

midnight.js文字顏色隨著背景變，屌炸了

color-animationjquery的顏色漸變動(dòng)畫插件。jquery的動(dòng)畫不支持顏色值的變化。改庫(kù)提供了這個(gè)支持。

transit對(duì)元素進(jìn)行css的變換

tagcanvas3D標(biāo)簽云效果詳細(xì)

iconate圖片切換動(dòng)畫

Snap.js左/右側(cè)導(dǎo)航的出現(xiàn)效果

CSSshake抖動(dòng)動(dòng)畫

ClickSpark.js點(diǎn)擊后的一些酷炫的效果

視覺(jué)差插件

scrollorama比較簡(jiǎn)單

superscrollorama能做的效果更多，但要用第三方Tween的庫(kù)，使用起來(lái)比較復(fù)雜。

scrolldeck

flash

swfobj能夠自動(dòng)檢測(cè)PC、Mac機(jī)器上各種主流瀏覽器對(duì)Flash插件的支持情況。它使得插入Flash媒體資源盡量簡(jiǎn)捷、安全。而且它是非常符合搜索引擎優(yōu)化的原則的。此外，它能夠避免您的HTML、XHTML中出現(xiàn)object、embed等非標(biāo)準(zhǔn)標(biāo)簽，從而符合更加標(biāo)準(zhǔn)。詳細(xì)

抽獎(jiǎng)

wScratchPad刮刮卡刮獎(jiǎng)效果

jqueryrotate旋轉(zhuǎn)插件?？梢杂脕?lái)做轉(zhuǎn)盤抽獎(jiǎng)效果

用戶體驗(yàn)增強(qiáng)類

Intro.js用來(lái)介紹網(wǎng)站的功能很不錯(cuò)。也可以做新手引導(dǎo)。

blockUILolding組件。

simple-hint提示信息。用css做的。兼容性IE9+。

dotdotdot文字溢出時(shí)，添加在文字末尾加省略號(hào)

jQuery-menu-aim二級(jí)菜單的切換如Amazon主頁(yè)上一樣迅速

AnythingZoomer放大鏡功能

美化/高亮語(yǔ)法代碼

google-code-prettify

DlHighlight僅支持JavaScript、CSS、XML、HTML這4語(yǔ)法高亮

please按要求隨機(jī)舒服的顏色

Awesomplete輸入的智能提示，自動(dòng)補(bǔ)全

proTip提示。感覺(jué)比Bootstrap的tip好

Hammerjs手勢(shì)庫(kù)。封裝了Swipe,Tap,Pinch,Pan等手勢(shì)

動(dòng)畫

velocity提高Jquery動(dòng)畫的性能。以及顏色動(dòng)畫之類的新特性。

SVG

Snap.svg操作SVG的JS庫(kù)。號(hào)稱SVG的jQuery。demo

walkway以動(dòng)畫的方式，漸漸地畫出SVG的路徑。

測(cè)試

Mocha

Chai

Should

Snoion

DeviceMock.jsmock設(shè)備。

其他類

ZeroClipboard將內(nèi)容復(fù)制到剪切板兼容主流瀏覽器的解決方案詳細(xì)

html2canvashtml轉(zhuǎn)化成canvas，可以用來(lái)做截圖。詳細(xì)

Ink響應(yīng)式html郵件框架

性能測(cè)試

抓取，解析RSS內(nèi)容（不能跨域，所以后臺(tái)要做代理，所謂的解析Rss其實(shí)就是解析xml）

jFeed

jRss簡(jiǎn)單版的jFeed

scriptcam與攝像頭交互

cylon.js機(jī)器人框架，支持35個(gè)平臺(tái)

Masonry一個(gè)瀑布流框架

devices.css移動(dòng)設(shè)備邊框的外觀。做原型的時(shí)候用不錯(cuò)。

Bootstrap相關(guān)類

Bootbox.js對(duì)bootstrap的彈出框做的一些封裝

免費(fèi)皮膚

AdminLTE

JSPlugins倉(cāng)庫(kù)

jQueryCards高質(zhì)量的jQuery插件網(wǎng)站

jster

nodemodules

npmrankSortnpmpackagesbypagerank

YOUMIGHTNOTNEEDJQUERYPLUGINS不依賴jQuery的js插件。

awesome-nodejs

Libraries.io各種語(yǔ)言的庫(kù)

OniUI去哪兒網(wǎng)做的一套基于Avalon的框架

常用的移動(dòng)端框架

zepto.js

語(yǔ)法與jquery幾乎一樣，會(huì)jquery基本會(huì)zepto~

最新版本已經(jīng)更新到1.16

iscroll.js

解決頁(yè)面不支持彈性滾動(dòng)，不支持fixed引起的問(wèn)題~

實(shí)現(xiàn)下拉刷新，滑屏，縮放等功能~

最新版本已經(jīng)更新到5.0

underscore.js

筆者沒(méi)用過(guò)，不過(guò)聽(tīng)說(shuō)好用，推薦給大家~

該庫(kù)提供了一整套函數(shù)式編程的實(shí)用功能，但是沒(méi)有擴(kuò)展任何JavaScript內(nèi)置對(duì)象。

最新版本已經(jīng)更新到1.8.2

滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁(yè)面的效果

slip.js

iSlider.js

fullpage.js

swiper.js

flex布局

flex布局目前可使用在移動(dòng)中，并非所有的語(yǔ)法都全兼容，效果良好~

placeholder顏色和男生對(duì)女生說(shuō)placeholder的問(wèn)題分享結(jié)束啦，以上的文章解決了您的問(wèn)題嗎？歡迎您下次再來(lái)哦！