html和css中input输入的样式调整

您所在的位置：网站首页 › 如何设置a标签的样式文字 › html和css中input输入的样式调整

html和css中input输入的样式调整

2024-07-16 21:24| 来源: 网络整理| 查看: 265

先说下基础样式，直接加class明就可以修改的

先看下原来的样子输入之前在这里插入图片描述

开始调整: .name { width: 200px; height: 30px; border: 1px solid #139be1; border-radius: 5px; color: blue; font-size: 15px; font-weight: bold; background-color: #faf1d8; text-indent: 10px; } 再看下效果（丑的事别管。。。）

在这里插入图片描述

继续调整获取焦点之后的样式 .name:focus { outline: 2px dashed #2feb2f; background-color: #aaa; }

在这里插入图片描述

下面再修改其他的样式 .name:placeholder-shown { color: red; border: 3px solid yellow; }

这个样式是修改显示placeholder时候的样式，也就是输入框里没值时的样式（到这里已经基本上放弃美观了。。。）在这里插入图片描述

然后设置placeholder的样式 .name::-webkit-input-placeholder { color: #2feb2f; font-size: 12px; font-weight: normal; }

这里是webkit内核浏览器的，不同浏览器写自己对应的前缀就好了在这里插入图片描述最后修饰出来的效果已经不忍直视了

补充

移动端（比如微信小程序）修饰placeholder用的不是css选择器，而是placeholder-class，像下面这样

.placeholder{ //这里写placeholder的样式 }

【本文地址】

html和css中input输入的样式调整

html和css中input输入的样式调整

今日新闻

推荐新闻