设置input 中placeholder的样式

短命女 2022-05-09 04:58 280阅读 0赞

**一、效果**  
![在这里插入图片描述][70]  
**二、代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    			color: red;
    		}
    		::-moz-placeholder { /* Firefox 19+ */  
    			color: red;
    		}
    		:-ms-input-placeholder { /* IE 10+ */ 
    		 color: red;
    		}
    		:-moz-placeholder { /* Firefox 18- */ 
    		 color: red;
    		}
    	</style>
    </head>
    <body>
    	名字：<input type="" name="" placeholder="我是一个测试">
    </body>
    </html>

**三、HTML input placeholder支持的属性**

1.  font properties
2.  color
3.  background properties
4.  word-spacing
5.  letter-spacing
6.  text-decoration
7.  vertical-align
8.  text-transform
9.  line-height
10. text-indent
11. opacity

eg1、  
效果  
![在这里插入图片描述][70 1]  
代码：

input::-webkit-input-placeholder {
    		   padding-left:30px;
    		   opacity:0.5;
    		}

剩下的大家自己去测哈~

[70]: /images/20220509/69cbdaa9bccc4914887fd6e676d6034d.png
[70 1]: /images/20220509/18b969afc8d44699b003af75ed041d0a.png

发表评论取消回复

表情：

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

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

相关阅读

相关 input 的placeholder样式

当我们给部分 input 类型的设置 placeholder 属性的时候，有的时候需要修改其默认的样式。 input::-webkit-input-place

谁借莪１个温暖的怀抱￠/ 2023年07月18日 15:30/ 0 赞/ 2 阅读

相关 input里面placeholder 字体设置

记录生活每一天， <input class="pellationag" type="text" placeholder-class="phcolor" place

素颜马尾好姑娘i/ 2023年01月23日 13:59/ 0 赞/ 251 阅读

相关 Element ui 修改el-input 的placeholder样式

/deep/.el-input__inner { &::placeholder { color: red;

曾经终败给现在/ 2023年01月02日 14:22/ 0 赞/ 203 阅读

相关输入框input 修改placeholder样式

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

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

相关如何简单修改input的placeholder样式

在做项目的时候，尤其事表单的时候，有时候input的placeholder的颜色值有点重，让我们一眼看过去分不清到底是不是已经填写的，为了更加分明，我们就需要修改一下place

喜欢ヅ旅行/ 2022年06月02日 01:16/ 0 赞/ 521 阅读

相关设置文本框的placeholder的样式

Input:-webkit-input-placeholder{ ...Style } textarea:-webkit-text

超、凢脫俗/ 2022年05月13日 05:04/ 0 赞/ 284 阅读

相关设置input 中placeholder的样式

一、效果 ![在这里插入图片描述][70] 二、代码 <!DOCTYPE html> <html lang="en"> <head>

短命女/ 2022年05月09日 04:58/ 0 赞/ 281 阅读

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

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

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

相关 input中placeholder的css样式设置

<template> <view> <input class="search" type="text" placeholder="请输入搜索内容" placeholder

刺骨的言语ヽ痛彻心扉/ 2022年01月31日 18:19/ 0 赞/ 316 阅读

相关改变input中placeholder默认值的样式

input::-webkit-input-placeholder{ color:4e4e4e; } in

ゞ浴缸里的玫瑰/ 2021年12月15日 08:45/ 0 赞/ 384 阅读