`

css3 之 修改input 输入框的placeholder 默认样式

 
阅读更多
/* 通用 */
::-webkit-input-placeholder { color:#999999; text-align: center;font-size: 15px;font-weight: bold; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#999999;text-align: center;font-size: 15px; font-weight: bold;}

/* webkit专用 */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { 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; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

 

分享到:
评论

相关推荐

    纯CSS3实现漂亮的input输入框动画样式库(Text input love)

    分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...

    修改输入框placeholder文字默认颜色-webkit-input-placeholder方法

    总结来说,修改HTML5输入框`placeholder`文本颜色主要通过CSS的特定选择器来实现,如`-moz-placeholder`、`-ms-input-placeholder`和`-webkit-input-placeholder`。通过正确使用这些选择器,可以确保在不同浏览器中...

    14种CSS3炫酷表单input输入框美化效果

    本文将深入探讨如何利用CSS3来实现14种不同的表单input输入框美化效果。 首先,CSS3的伪类选择器是实现输入框美化的核心工具。例如,`:hover`用于鼠标悬停时的效果,`:focus`则表示输入框获取焦点时的状态,`:...

    css苹果手机去掉input样式

    为了统一不同平台下输入框的显示效果,我们可以利用CSS中的`-webkit-appearance`属性来去除苹果手机上输入框的默认样式。该属性是WebKit内核浏览器特有的CSS属性,主要用于控制表单控件的外观。具体地,可以设置其值...

    输入框input样式,各种效果齐全

    在网页设计中,输入框(Input)是用户与网站交互的重要元素之一,它允许用户输入文本数据。一个良好的输入框设计不仅可以提升用户体验,还能增强页面的整体美观性。本资源"输入框input样式,各种效果齐全"提供了一...

    css3酷炫input框

    7. **自定义占位符**:通过CSS,我们可以修改`placeholder`文本的颜色、大小和位置,使其更符合设计风格。 8. **响应式设计**:利用媒体查询(`@media`),可以确保input框在不同设备和屏幕尺寸下依然保持良好的显示...

    带提示的input输入框类似html5的 placeholder

    在网页设计中,用户体验是一个至关重要的因素,而`input`输入框是用户与网页交互的主要方式之一。HTML5引入了一项新特性,即`placeholder`属性,它为`<input>`元素提供了提示文本,帮助用户了解应输入什么样的信息。...

    很漂亮又实用的的Input框,支持CSS或者图片两种样式。

    本资源提供了一种既美观又实用的输入框设计方法,支持通过CSS样式或图片来定制其外观,从而提升网页的用户体验和视觉吸引力。 首先,我们来看看HTML中的Input元素。Input元素是HTML表单的一部分,用于创建各种类型...

    CSS3实现动态输入框input框特效.zip

    总的来说,"CSS3实现动态输入框input框特效"是通过巧妙运用CSS3的新特性,以提升网页表单的视觉吸引力和用户体验。结合JavaScript,我们可以进一步优化动态效果,比如在输入时实时显示字符数,或者在输入错误时给予...

    纯css实现输入框placeholder动效及输入校验

    借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现 :placeholder-shown伪类目前兼容性如下: :placeholder-shown兼容性 直接上代码!:smiling_face_selector: 源码 html: <...

    input的placeholder属性兼容ie8 优化版

    在网页设计中,`<input>` 的 `placeholder` 属性是一个非常实用的功能,它允许用户在输入框中看到一个提示文本,通常用于说明输入框预期接收的数据类型或格式。然而,这个特性在早期的 Internet Explorer 版本,尤其...

    CSS3 input输入框蓝光特效特效代码

    "CSS3 input输入框蓝光特效特效代码"是一个利用CSS3的`transition`过渡属性来实现的动态效果,使得输入框在聚焦时呈现出一种蓝色光芒的效果,增加了网页的互动性和吸引力。 首先,我们来看`input`元素的基本结构。...

    html5配合css3实现带提示文字的输入框

    总之,HTML5的`placeholder`属性和CSS3的样式规则为我们构建了一个实用且具有良好用户体验的输入框组件。在实际项目中,开发者可以根据自己的需求和设计风格对这些代码进行调整和扩展,以实现更丰富的功能和效果。

    简单的css3输入框提示文字效果

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了许多强大的新特性,其中之一就是能够创建出丰富的输入框提示文字效果。这个“简单的css3输入框提示文字效果”是一个实例,它展示了如何利用CSS3来优雅地处理...

    js-input输入框提示语

    综上所述,`js-input输入框提示语`是前端开发中的基本需求,通过HTML的`placeholder`属性结合JavaScript的动态操作,可以实现丰富的提示语功能,提高用户交互体验。在实际开发中,还需要考虑到兼容性和用户体验,...

    css3制作的input文本框动画特效

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的视觉效果和交互体验,其中之一就是能创建出各种动态的input文本框动画特效。这款特效专注于提供简单而美观的网址链接和邮箱格式输入框的焦点效果,增强...

    带图标的input输入框

    在网页设计中,"带图标的input输入框"是一个常见的交互元素,它通过结合图标与文本输入框,提升用户界面的美观度和易用性。这样的设计可以使用户更直观地理解输入框的目的,例如,一个搜索图标常用于搜索框,锁型...

    input输入框删除文字效果js代码

    为了提供更好的用户体验,许多网站会添加一些交互特效,例如本例中的"input输入框删除文字效果js代码"。这个特效使得用户在输入框中输入文字后,可以通过点击一个可操作的图标或按钮来轻松清除已输入的内容,类似...

Global site tag (gtag.js) - Google Analytics