css - 输入占位符文本被隐藏(所有浏览器)

Question

我有一个带占位符的文本输入，如果我把它放在我的 Angular 应用程序中，占位符是不可见的，但在它外面是可见的。为什么是这样？这是一个没有 Angular 绑定(bind)的简单文本输入:

<input id="Text5" placeholder="Placeholder" type="text">

ng-app 元素有类“via-slds”，这似乎是导致问题的原因，但我不知道什么 CSS 会隐藏占位符文本

<!-- CSS -->
        .via-slds input, .via-slds select, .via-slds textarea {
        -webkit-appearance: none;
    }
    <style>…</style>
    .via-slds input, .via-slds textarea {
        box-shadow: none;
        outline: none !important;
    }
    <style>…</style>
    .via-slds input {
        line-height: normal;
    }
    <style>…</style>
    .via-slds button, .via-slds input, .via-slds optgroup, .via-slds select, .via-slds textarea {
        color: inherit;
        font: inherit;
        margin: 0px;
    }
    <style>…</style>
    .via-slds *, .via-slds ::after, .via-slds ::before {
        box-sizing: border-box;
    }
    user agent stylesheet
    input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
        padding: 1px 0px;
    }
    user agent stylesheet
    input {
        -webkit-appearance: textfield;
        background-color: white;
        -webkit-rtl-ordering: logical;
        cursor: text;
        padding: 1px;
        border-width: 2px;
        border-style: inset;
        border-color: initial;
        border-image: initial;
    }
    user agent stylesheet
    input, textarea, select, button {
        text-rendering: auto;
        color: initial;
        letter-spacing: normal;
        word-spacing: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        display: inline-block;
        text-align: start;
        margin: 0em;
        font: 400 13.3333px Arial;
    }
    user agent stylesheet
    input, textarea, select, button, meter, progress {
        -webkit-writing-mode: horizontal-tb;
    }
    <style>…</style>
    .via-slds body, .via-slds:not(html) {
        font-size: 0.8125rem;
        background: 0px 0px;
    }
    <style>…</style>
    .via-slds {
        color: rgb(0, 57, 107);
        font-weight: 300;
        font-size: 19px;
        background: rgb(244, 246, 249);
    }
    <style>…</style>
    .via-slds, .via-slds label, .via-slds label span {
        color: rgb(73, 115, 156);
    }
    <style>…</style>
    .via-slds {
        font-size: 0.9rem;
    }
    <style>…</style>
    .via-slds {
        font-family: "Salesforce Sans", Arial, sans-serif;
        font-size: 100%;
        line-height: 1.5;
        color: rgb(22, 50, 92);
        -webkit-tap-highlight-color: transparent;
        background: rgb(255, 255, 255);
    }
    <style>…</style>
    .via-slds {
        text-size-adjust: 100%;
        margin: 0px;
    }
    @media (min-width: 62.5em)
    <style>…</style>
    body, html {
        font-size: 16px;
    }
    <style>…</style>
    body, html {
        direction: ltr;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        font-size: 19px;
    }
    @media (min-width: 62.5em)
    <style>…</style>
    body, html {
        font-size: 16px;
    }
    <style>…</style>
    body, html {
        direction: ltr;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        font-size: 19px;
    }
    <style>…</style>
    .via-slds *, .via-slds ::after, .via-slds ::before {
        box-sizing: border-box;
    }
    <style>…</style>
    .via-slds *, .via-slds ::after, .via-slds ::before {
        box-sizing: border-box;
    }
    <style>…</style>
    .via-slds ::selection {
        text-shadow: none;
        color: rgb(22, 50, 92);
        background: rgb(216, 237, 255);
    }

Answer 1

如果你不介意专注，这会起作用

<input name="Text5" type="text" value="Text5" 
onfocus="if(this.value==this.defaultValue)this.value='';" 
onblur="if(this.value=='')this.value=this.defaultValue;">