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制作3D效果文字具体实现样式
May 02 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 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中DOMElement操作xml文档实例演示
2013/03/26 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
用js判断输入是否为中文的函数
2014/03/10 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python函数返回值实例分析
2015/06/08 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Python面向对象类的继承实例详解
2018/06/27 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
装饰资料员岗位职责
2013/12/30 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
运动员口号
2014/06/09 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫