我有一个带占位符的文本输入,如果我把它放在我的角应用程序中,占位符是不可见的,但在它外面是可见的。为什么是这样?它是一个没有角度绑定的简单文本输入:
<input id="Text5" placeholder="Placeholder" type="text">
ng-app元素有类&#34; via-slds&#34;这似乎导致了这个问题,但我无法弄清楚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);
}
答案 0 :(得分:1)
如果你可以做焦点,那么这将有效
<input name="Text5" type="text" value="Text5"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;">