css3学习之placeholder，也就是占位符

最新推荐文章于 2024-03-11 07:45:00 发布
最新推荐文章于 2024-03-11 07:45:00 发布
阅读量3.5k 收藏
点赞数
分类专栏： css 文章标签： css xhtml javascript 测试 html5 search
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hedong37518585/article/details/6620639
版权

什么是占位符？相信做过input搜索框的人都写过js版本的，那就是输入框默认的灰色文字，点击后消失，然后你可以输入你的关键字，如果你把你输入的关键字全部删除，那么一开始的灰色文字又出来了，我说的占位符就是这个灰色文字，在XHTML1.0的时候，我们要实现这个效果必须用javascript实现

 

现在HTML5只要一个属性就可以支持，那就是placeholder

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试placeholder</title>
</head>

<body>
<input type="search" placeholder="我测试一下" />
</body>
</html>


何东狮吼
关注
专栏目录
Bootstrap之占位符
qq_44703604的博客
04-20 885
一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的 import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignore') import ssl ssl._create_default_https_context = ssl._cre
css占位符_CSS：占位符显示
culuo8053的博客
08-06 3143
css占位符One of the first plugins that would hit a new framework in the early days of JavaScript frameworks was a placeholder plugin, which is why we were so excited when HTML5 brought us the placeholder...
HTML空格占位符
热门推荐
远方
02-25 18万+
&amp;#32; == 普通的英文半角空格&amp;#160; == &amp;nbsp; == &amp;#xA0; == no-break space （普通的英文半角空格但不换行）&amp;#12288; == 中文全角空格 （一个中文宽度）&amp;#8194; == &amp;ensp; == en空格 （半个中文宽度）&amp;#8195; == &amp;emsp; == em空格...
css占位符
wusejiege6的博客
06-22 2330
&#32; == 普通的英文半角空格 &#160; == &nbsp; == &#xA0; == no-break space （普通的英文半角空格但不换行） &#12288; == 中文全角空格 （一个中文宽度） &#8194; == &ensp; == en空格 （半个中文宽度） &#8195; == &emsp; == em空格 （一个中文宽度） &#8197; == 四分之一em空格 （四分之一中文宽度） 相
css 修改占位符样式
weixin_42340514的博客
11-19 1448
<style> input::-webkit-input-placeholder { /* WebKit browsers */ font-size: 14px; color:#ccc; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-size: 14p...
简单的CSS3网页内容placeholder占位特效
12-13
Mocka就是利用这些动画效果来设计出各种各样的placeholder占位符，如旋转、缩放、平移等，使原本静态的加载过程变得生动有趣。 占位符（Placeholders）通常用于预览元素的布局和结构，尤其是在内容未加载或者用户未...
CSS3注册表单文本框占位符特效
06-24
总结起来，CSS3注册表单文本框占位符特效是一种利用CSS3技术优化网页表单设计的方法，通过增强占位符的视觉效果和交互体验，使用户更易于理解和使用表单，从而提高网站的可用性和用户满意度。开发者可以根据自己的...
placeholder-loading:简单而灵活，仅css，内容占位符加载动画。 https
05-01
简单而灵活，仅css，内容占位符加载动画。 演示版 看一下这些示例，但请记住，它足够灵活，可以根据需要使用元素。 您可以更改顺序，添加头像或图像，更改文本栏大小等。 正在安装 通过npm npm install ...
day24-Content placeholder（内容占位符）
07-16
CSS选择器可以精准地定位到HTML中的内容占位符，例如`.placeholder`或`#content-placeholder`，然后为其设置颜色、大小、边距等样式属性。此外，CSS预处理器如Sass或Less还可以帮助开发者更高效地管理和维护这些占位...
使用CSS样式化占位文本
最新发布
rubys007的博客
03-11 747
占位符文本将自动继承常规输入文本的字体系列和字体大小，但您可能会遇到需要更改占位符文本颜色的情况。您可以通过 ::placeholder 伪元素来实现这一点。在我们的示例中，让我们为占位符文本定义一个自定义颜色，并且还要覆盖继承的字体大小，以便有更小的占位符文本。不幸的是，您可以看到 ::placeholder 目前需要一系列的供应商前缀。
使用Js控制输入灰色字搜索框多种搜索样式集合下载
11-10
使用Js控制输入灰色字搜索框多种搜索样式集合下载
222. 【CSS-选择器世界】-占位符显示伪类-placeholder-shown
七镜的博客
02-23 209
placeholder-shown 伪类的匹配和 placeholder 属性密切相关，顾名思义就是“占位符显示伪类”，表示当输入框的 placeholder 内容显示的，匹配该输入框。
空闲占位符X css实现
weixin_34408624的博客
09-27 123
2019独角兽企业重金招聘Python工程师标准>>> ...
css占位符_如何在CSS中创建占位符加载动画
weixin_26715991的博客
08-29 2047
css占位符Motion plays an important role in applications. It can help to make interfaces more expressive and intuitive, whilst also providing key information, such as feedback that can guide a user’s atte...
css3占位符特效
weixin_40863414的博客
08-07 281
一个简单的占位符变化效果，主要利用:focus去控制伪placeholder变化，里面也涉及到:focus-within等知识，文章分析了主要思路，让我们做到举一反三。 文章地址： http://www.qiutianaimeili.com/html/page/2019/08/f8j6dyj4kfj.html ...
也谈placeHolder占位符
zjanhoo的专栏
09-30 723
今天用FF浏览网站，发现360网站首页中探索栏输入框处用了placeHolder属性（PS：本人不是写软文，只是爱好前端技术而已），在IE中打开看了一下，体验还行，于是就想写一段代码来实现这个功能。好了，不多说，直接贴代码。 (function($){ $.fn.placeHolder = function(options){ var _self = $(th
CSS设置占位符文本的对齐方式
qq_43067585的博客
07-16 1285
HTML的placeholder属性指定一个简短提示，用于描述input字段或文本区域（textarea）的预期值，即占位符文本。短提示在用户输入值之前显示在字段中。在大多数浏览器中，占位符文本通常左对齐。那么如何设置占位符文本的对齐方法？下面本篇文章就来介绍一下，希望对大家有所帮助。 CSS设置占位符文本的对齐方式 可以通过CSS的placeholder选择器使用text-align属性设置占位符文本的对齐方式。 语法： 这个CSS placeholder选择器在不同的浏览器中有不同的写法，例如：
占位隐藏 html,CSS设置输入框占位符placeholder点击隐藏
weixin_33109551的博客
05-31 2388
在HTML5中可以对文本输入框增加placeholder属性，英文placeholder意思是占位符，用在文本输入框的时候可以友好的显示提示文字，例如下面这个就是常见的文本框提示效果：对于IE浏览器，该属性支持IE10+版本，低版本的IE将不显示这里的提示文字，在IE10+浏览器里，当鼠标点击搜索框或通过键盘获得焦点时，提示文字自动消失，失去焦点时再次显示。在Webkit浏览器(Chrome，Op...
占位 Bootstrap
weixin_34306446的博客
07-29 330
中文网  http://www.bootcss.com/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值