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的新特性
Sep 05 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
php排序算法实例分析
2016/10/17 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
python中setuptools的作用是什么
2020/06/19 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
政府法律服务方案
2014/06/14 职场文书
霸气队列口号
2014/06/18 职场文书
终止劳动合同协议书
2014/10/05 职场文书
mysql知识点整理
2021/04/05 MySQL
python 提取html文本的方法
2021/05/20 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫