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无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
Vuex实现简单购物车
2021/01/10 Vue.js
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python3多线程操作简单示例
2018/05/22 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
三分钟演讲稿事例
2014/03/03 职场文书
反邪教标语
2014/06/23 职场文书
应届大专生求职信
2014/06/26 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
Nginx 常用配置
2022/05/15 Servers