Css 足够的代码重现问题，如中所示。 /*This is for Google Chrome*/ input::placeholder, input[type=date]::-webkit-datetime-edit { color: rgba(29,

足够的代码重现问题，如中所示。

/*This is for Google Chrome*/
input::placeholder, input[type=date]::-webkit-datetime-edit {
    color: rgba(29, 55, 92, .3) !important;
    font-size: 1em !important;
    font-style: oblique;
}

/*This is for MS Edge*/
input[type="text"]::-ms-input-placeholder, input[type="tel"]::-ms-input-placeholder, input[type="email"]::-ms-input-placeholder, input[type="number"]::-ms-input-placeholder {
    color: rgba(29, 55, 92, .3) !important;
    font-size: 1em !important;
    font-style: oblique;
}

input[type=date]:focus::-webkit-datetime-edit {
    color: black !important;
}


input[type=date]:valid::-webkit-datetime-edit {
    color: black !important;
}

.checkmark, .checkmarkSquare {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee; /*light grayish-beige*/
    border-radius: 50%;
}
/* Create the checkmark */
.checkmark:after, .checkmarkSquare:after {
    content: '\02714'; 
    color: white;
    display: none;
}

<style>
    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: red; /*rgba(29, 55, 92, .3)  gainsboro red*/
        opacity: 1; /* Firefox */
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: red; /*rgba(29, 55, 92, .3)*/
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
        color: red; /*rgba(29, 55, 92, .3)*/
    }
</style>
<input type="text" name="fname" placeholder="mm/dd/yyyy">

<style>
    .center {
        position: absolute;
        top: 50vh;
        left: 40vw;
    }
    /* The container */
    .container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        /* Hide the browser's default checkbox */
        .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .container input:checked ~ .checkmark {
        background-color: #1D375C;
        box-shadow: darkgray 2px 2px 8px;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .container .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
</style>
<div class="center">
    <div>
        <label class="container">
            One
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
        <label class="container">
            Two
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
        <label class="container">
            Three
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
        <label class="container">
            Four
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
    </div>
</div>