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中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP基础知识回顾
2012/08/16 PHP
PHP处理会话函数大总结
2015/08/05 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
vue Render中slots的使用的实例代码
2017/07/19 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
pytorch中index_select()的用法详解
2021/01/06 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
秘书英文求职信
2014/04/16 职场文书
员工工作表现评语
2014/04/26 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
北京故宫的导游词
2015/01/31 职场文书
药房管理制度范本
2015/08/06 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
关于Vue中的options选项
2022/03/22 Vue.js