修改input输入框的样式

Love The Way You Lie 2021-12-24 15:39 717阅读 0赞

直接上代码

<style>
    	.input{
    		-web-kit-appearance:none;
    		-moz-appearance: none;
    		font-size:1.4em;
    		height:2.0em;
    		border-radius:5px;
    		border:1px solid #c8cccf;
    		color:#6a6f77;
    		outline:0;
    		text-align:center;
    	}
    	.input:focus{
    		border:1px solid #ff0000;
    	}
    </style>
    <div style="border:4px dashed #ccc;margin:100px;padding:50px;width:500px;">
    	自定义输入框样式：<input type="text" class="input" placeholder="请输入" οnfοcus="this.placeholder=''" οnblur="this.placeholder='请输入'"/>
    </div>

效果：

![1073044-20190604085137899-873964843.png][]

说明：

首先要将input输入框的默认样式去掉

-web-kit-appearance:none;
      -moz-appearance: none;

然后我们加上边框和圆角，并设置input的高度和字体大小和颜色

font-size:1.4em;
    height:2.7em;
    border-radius:4px;
    border:1px solid #c8cccf;
    color:#6a6f77;

然后将input输入框的轮廓去掉：

outline:0;

修改placeholder的样式

::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #6a6f77;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #6a6f77;
    }
    input::-webkit-input-placeholder{
    color: #6a6f77;
    }

获得焦点时显示红色：

.input:focus{
    		border:1px solid #ff0000;
    	}

点击的时候，去掉placeholder文本：

placeholder="请输入" οnfοcus="this.placeholder=''" οnblur="this.placeholder='请输入'"

参考：https://blog.csdn.net/qq\_35718410/article/details/52149894

转载于:https://www.cnblogs.com/1906859953Lucas/p/10953423.html

[1073044-20190604085137899-873964843.png]: /images/20211223/111cc2697d304d32afb5aad0cf41e7e3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，717人围观）

还没有评论，来说两句吧...

相关阅读

相关输入框input 修改placeholder样式

::-webkit-input-placeholder { / WebKit, Blink, Edge / } :-moz-placeholder {

客官°小女子只卖身不卖艺/ 2022年12月18日 07:59/ 0 赞/ 216 阅读

相关输入框input

input输入框在ie下高度显示不正常，并且里面的文字内容不居中显示解决方法：可以具体看百度首页这里简单说下： <span> <i

深藏阁楼爱情的钟/ 2022年07月16日 01:47/ 0 赞/ 368 阅读

相关修改输入框placeholder文字的样式

<table style="width:983px; background:none!important; border:0px!important; bottom:auto!

绝地灬酷狼/ 2022年06月10日 09:09/ 0 赞/ 314 阅读

相关修改input、textarea输入框placeholder样式

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

青旅半醒/ 2022年04月13日 14:54/ 0 赞/ 763 阅读

相关 PC端修改input 输入框光标颜色

input 输入框的光标颜色修改方法： 1. 根据字体颜色，即设置color，光标颜色会一起改变 <div class="custom-input">

古城微笑少年丶/ 2022年04月11日 11:58/ 0 赞/ 595 阅读

相关 input radio,改装input单选框样式，单选框input修改默认样式

HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

缺乏、安全感/ 2022年04月08日 15:29/ 0 赞/ 396 阅读

相关 input type=['date', 'week']输入框，默认样式修改

H5自带的日期等选择框默认样式略不漂亮，一般使用时候都需要自行自定义一下。以type=“week”为例，原本样子 > `<input type="week" class=

ゞ浴缸里的玫瑰/ 2022年03月14日 11:52/ 0 赞/ 407 阅读

相关修改input输入框的样式

直接上代码 <style> .input{ -web-kit-appearance:none; -moz-appearance: n

Love The Way You Lie/ 2021年12月24日 15:39/ 0 赞/ 718 阅读

相关 css样式之input输入框默认样式

帮朋友写个简单的课程设计，后面会贴出来，项目刚开始就遇到一个坑（给input输入框设定样式，但是，点击后会出现蓝色边框），之前写其他的项目时也遇到过，百度一下资料解决了，现在又

Love The Way You Lie/ 2021年12月24日 11:11/ 0 赞/ 986 阅读

相关 input 输入框限制

只能输入数字和一个小数点转自： https://www.jianshu.com/p/c26bfb0dfd8d <label> 　　<input id="t

红太狼/ 2021年12月23日 00:23/ 0 赞/ 462 阅读