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 相关文章推荐
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
详解flex:1什么意思
Jul 23 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 mvc开发模式的感想
2011/06/28 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
详谈js模块化规范
2017/07/07 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
django解决跨域请求的问题详解
2019/01/20 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
数据管理员的自我评价分享
2013/11/15 职场文书
老干部工作先进事迹
2014/08/17 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
法律讲堂观后感
2015/06/11 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
nginx配置指令之server_name的具体使用
2022/08/14 Servers