HTML5中input输入框默认提示文字向左向右移动的示例代码


Posted in HTML / CSS onSeptember 10, 2020

HTML5中input输入框默认提示文字向左向右移动首先演示input输入框代码

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .sousuo {
            width: 458px;
            height: 34px;
            margin-left: 190px;
            margin-top: 200px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <input class="sousuo" type="text" placeholder="请输入搜索内容...">
</body>

代码运行界面图

HTML5中input输入框默认提示文字向左向右移动的示例代码

重要的点来了

可以看到默认提示文字是紧紧靠着左边框的
我们为了美观需要把它往后移动 只需要在css中添加代码

text-indent: 20px;

下面我们看下加入代码后的运行界面

HTML5中input输入框默认提示文字向左向右移动的示例代码

到此这篇关于HTML5中input输入框默认提示文字向左向右移动的示例代码的文章就介绍到这了,更多相关html5 input输入框提示文字内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 #HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 #HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 #HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 #HTML / CSS
h5封装下拉刷新
Aug 25 #HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 #HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 #HTML / CSS
You might like
php邮件发送,php发送邮件的类
2011/03/24 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
基于initPHP的框架介绍
2013/04/18 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
深入了解js原型模式
2019/05/30 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
极简的Python入门指引
2015/04/01 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
学期自我鉴定
2013/11/04 职场文书
公休请假条
2014/04/11 职场文书
教师节宣传方案
2014/05/23 职场文书
篮球赛口号
2014/06/18 职场文书
企业安全生产规章制度
2015/08/06 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python