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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
玩转CSS3色彩
Jan 16 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
python使用Apriori算法进行关联性解析
2017/12/21 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
保安岗位职责
2014/02/21 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
职业规划实施方案
2014/06/10 职场文书
大学生自我评价范文
2015/03/03 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
MySQL RC事务隔离的实现
2022/03/31 MySQL
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android
React更新渲染原理深入分析
2022/12/24 Javascript