首页 建站教程 WEB前端 正文

CSS3自定义input光标及placeholder提示文字颜色

美化input对与前端工程师来说会经常碰到,那么如何通过CSS3来自定义input光标,placeholder提示文字,颜色等属性呢?其实CSS3里提供了专门的规则属性来实现input的自定义化,来帮助前端工程师最大程度的还原视觉设计稿,具体实现代码如下:css代码由于不同的浏览器兼容性不同,所以针对不同的浏览器有不同的写法/* 通用 */ ::-webk...

美化input对与前端工程师来说会经常碰到,那么如何通过css3自定义input光标,placeholder提示文字,颜色等属性呢?其实css3里提供了专门的规则属性来实现input的自定义化,来帮助前端工程师最大程度的还原视觉设计稿,具体实现代码如下:

css代码

由于不同的浏览器兼容性不同,所以针对不同的浏览器有不同的写法

/* 通用 */
::-webkit-input-placeholder { color:#f00;caret-color:#f00;}
::-moz-placeholder { color:#f00;caret-color:#f00;} /* firefox 19+ */
:-ms-input-placeholder { color:#f00;caret-color:#f00;} /* ie */
input:-moz-placeholder { color:#f00;caret-color:#f00;}

/* webkit专用 */
#field2::-webkit-input-placeholder { color:#00f; caret-color:#00f;}
#field3::-webkit-input-placeholder { color:#090; caret-color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* mozilla专用 */
#field2::-moz-placeholder { color:#00f;caret-color:#00f;}
#field3::-moz-placeholder { color:#090;caret-color:#090;background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* 定义光标颜色*/
input{ caret-color:#f66;}
.input2{ caret-color:#005FFF;}
.input3{ caret-color:#090; }
.input4{ caret-color:#999; }

完整实例代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>优美主题_umtheme.com</title>
<style>
 html,body{ margin: 0; padding: 0; background:#202939}
.box{ max-width: 185px; text-align: center; margin: 0 auto; padding: 100px 0;}
 input{ clear: both; display: block; margin: 15px 0px;font-size: 14px; line-height: 30px;border: medium none; padding: 0 5px;caret-color:#f66;}
        /* 通用 */
::-webkit-input-placeholder { color:#f66; }
::-moz-placeholder { color:#f66; } /* firefox 19+ */
:-ms-input-placeholder { color:#f66; } /* ie */
input:-moz-placeholder { color:#f66;}

/* webkit专用 */
.input2::-webkit-input-placeholder { color:#005FFF;caret-color:#005FFF; }
.input3::-webkit-input-placeholder { color:#090;caret-color:#090; background:lightgreen; text-transform:uppercase; }
.input4::-webkit-input-placeholder { font-style:italic;letter-spacing:3px; color:#999;caret-color:#999;  }

/* mozilla专用 */
.input2::-moz-placeholder { color:#005FFF;caret-color:#005FFF; }
.input3::-moz-placeholder { color:#090; caret-color:#090; background:lightgreen; text-transform:uppercase; }
.input4::-moz-placeholder { font-style:italic; letter-spacing:3px; color:#999;caret-color:#999; }
    
/* 定义光标颜色*/
input{ caret-color:#f66;}
.input2{ caret-color:#005FFF;}
.input3{ caret-color:#090; }
.input4{ caret-color:#999; }
</style>
</head>

<body>
 <div class="box">
    <input autofocus="autofocus" class="input1" name="fname" type="text" placeholder="请输入搜索关键字...">
    <input autofocus="autofocus" class="input2" name="fname" type="text" placeholder="请输入搜索关键字...">
    <input autofocus="autofocus" class="input3" name="fname" type="text" placeholder="请输入搜索关键字...">
    <input autofocus="autofocus" class="input4" name="fname" type="text" placeholder="请输入搜索关键字...">
 </div>
</body>
</html>

效果演示

对于input的自定义美化,虽然只是前端工作上的细节处理,但是完善这样细小的差异可以尽可能的还原视觉设计稿,才能获得更高质量的还原效果。

打赏
海报

本文由优美主题原创或收集发布

转载请注明本文地址:http://www.umtheme.com/web/150.html

相关推荐

Js实现双击鼠标自动滚动页面效果

Js实现双击鼠标自动滚动页面效果

主要介绍了Js实现双击鼠标自动滚动页面的示例代码,在特定的页面也许可以用的的上例如小说或一些资讯类型的网站,需要的朋友可以试一试。操作比较简单把以下代码加在网站的页面中,就可以实现双击鼠标实现自动滚屏...

WEB前端 2021.03.15 0 131

如何通过css3给自己网站logo添加闪光效果

如何通过css3给自己网站logo添加闪光效果

通过css3给自己网站logo添加闪光效果,感觉效果还不错,可以提升用户对网站或企业的品牌印象。具体实现方法如下:找到自己网站logo外面层的盒子(元素),并给该元素添加以下css代码/*首先我们需...

WEB前端 2021.01.14 2 483

纯css简单实现角标样式

纯css简单实现角标样式

纯css实现角标效果,通常在置顶,推荐,热门等需要特殊标注的场景中可以应用到,这里主要用到transform:rotate(-30deg...

WEB前端 2020.10.16 0 1302

如何在html页面中通过css隐藏元素

在平常的页面布局中,我们经常会遇到将某个模块隐藏,而实现不同的页面布局或js交互效果,尤其是在响应式布局中比较常见,下面我们整理了一些关于实现隐藏页面元素的多种方法以及各种方法不同的特点(如:是否占据...

WEB前端 2020.09.18 0 512

web前端写html页面div+css命名规范

web前端写html页面div+css命名规范

使用良好的CSS书写规范来写CSS代码,既能最大化优化前端代码,提升代码阅读体验,更重要的是为以后维护带来方便。常用的CSS命名一般由小...

WEB前端 2020.09.08 0 586

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi

感谢您的支持