我有一个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
                                               }
                                               });


如何更改出现在sweetalert中的inputPlaceholder的颜色。我试过了:

.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;
}

最佳答案

找到了解决方案。在sweetalert.css文件中,以下几行与占位符有关:

.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; }

只需更改不透明度和颜色即可。

关于javascript - 使用CSS更改Sweetalert占位符颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41644424/

10-12 15:23