[英]Change sweetalert placeholder color with css
I have a Sweetalert as follows: 我有一个Sweetalert如下:
swal({
title: "my title",
text: "",
type: "input",
imageUrl: "images/my_image.png",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "username..."
},
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("you didn't type anything...");
return false
}
});
How can I change the color of the inputPlaceholder that appears in the sweetalert. 我怎样才能改变这种状况出现在sweetalert的inputPlaceholder的颜色。 I have tried:
我努力了:
.sweet-alert input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: whitesmoke;
padding-left: 4px;
}
.sweet-alert input::-moz-placeholder { /* Firefox 19+ */
color: whitesmoke;
padding-left: 4px;
}
.sweet-alert input:-ms-input-placeholder { /* IE 10+ */
color: whitesmoke;
padding-left: 4px;
}
.sweet-alert input:-moz-placeholder { /* Firefox 18- */
color: whitesmoke;
padding-left: 4px;
}
.inputPlaceholder {
color: white !important;
}
Found the solution. 找到了解决方案。 In sweetalert.css file there are these lines related to the placehodler:
在sweetalert.css文件中,有以下几行与placehodler相关:
.sweet-alert input:focus::-moz-placeholder {
transition: opacity 0.3s 0.03s ease;
opacity: 0.9; }
.sweet-alert input:focus:-ms-input-placeholder {
transition: opacity 0.3s 0.03s ease;
opacity: 0.9; }
.sweet-alert input:focus::-webkit-input-placeholder {
transition: opacity 0.3s 0.03s ease;
opacity: 0.9; }
.sweet-alert input::-moz-placeholder {
color: whitesmoke; }
.sweet-alert input:-ms-input-placeholder {
color: whitesmoke; }
.sweet-alert input::-webkit-input-placeholder {
color: whitesmoke; }
Just had to change the opacities and the colors. 只需更改不透明度和颜色即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.