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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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实现文件下载(支持中文文名)
2013/12/04 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现一个简单的ping工具方法
2019/01/31 Python
简单了解python变量的作用域
2019/07/30 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
Python socket 套接字实现通信详解
2019/08/27 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
《小松树和大松树》教学反思
2014/02/20 职场文书
检查接待方案
2014/02/27 职场文书
品德评语大全
2014/05/05 职场文书
校庆活动策划方案
2014/06/05 职场文书
承诺函范文
2015/01/21 职场文书
四风之害观后感
2015/06/09 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android