我试图根据我的设计来设计纸张输入。我使用了here 描述的一些自定义属性,但并非所有这些都有用。
我使用 - paper-input-container-label 和 - paper-input-container-input-focus 时遇到问题。
也许我尝试以错误的方式使用它们,或者需要一些额外的步骤。
这是我的代码
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<dom-module id="first-element">
<template>
<style>
paper-input {
--paper-input-container-color: rgb(64, 64, 64);
--paper-input-container-focus-color: rgb(64, 64, 64);
--paper-input-container: {
border: none;
padding: 0px;
}
--paper-font-subhead: {
font-size: 100%;
}
--paper-input-container-underline-focus: {
display: none;
}
--paper-input-container-underline: {
display: none;
}
--paper-input-container-input: {
height: 24px;
line-height: 20px;
padding: 0 4px;
border: 1px solid rgb(194, 198, 199);
}
--paper-input-container-input-focus: {
border-color:red;
}
--paper-input-container-label {
font-weight: bold;
}
--paper-input-container-invalid-color: red;
}
:host {
display: block;
}
</style>
<paper-input always-float-label label="Floating label"></paper-input>
<paper-input label="username">
<iron-icon icon="icons:accessible" slot="prefix"></iron-icon>
<div slot="suffix">@email.com</div>
</paper-input>
</template>
<script>
class FirstElement extends Polymer.Element {
static get is() { return 'first-element'; }
static get properties() {
return {
prop1: {
type: String,
value: 'first-element'
}
};
}
}
window.customElements.define(FirstElement.is, FirstElement);
</script>
</dom-module>
答案 0 :(得分:1)
我不确定你期待什么结果所以很难帮助你,但有一点我确定你的风格标签太乱了。你需要在mixins之后写一个分号,因为它们就像css属性,每个css属性都是分号分开的。
尝试你的代码:
<style>
:host {
display: block;
}
paper-input {
--paper-input-container-color: rgb(64, 64, 64);
--paper-input-container-focus-color: rgb(64, 64, 64);
--paper-input-container: {
border: none;
padding: 0px;
};
--paper-font-subhead: {
font-size: 100%;
};
--paper-input-container-underline-focus: {
display: none;
};
--paper-input-container-underline: {
display: none;
};
--paper-input-container-input: {
height: 24px;
line-height: 20px;
padding: 0 4px;
border: 1px solid rgb(194, 198, 199);
};
--paper-input-container-input-focus: {
border-color: red;
};
--paper-input-container-label: {
font-weight: bold;
};
--paper-input-container-invalid-color: red;
}
</style>
另一件事,您正在尝试设置焦点上输入的边框颜色,但您也将display
设置为none
,这是没有意义的。如果要设置颜色样式,则必须删除display: none
并将border-color: red;
添加到--paper-input-container-underline-focus
。