Polymer: styling paper-input
Question
I would like to style some properties of a paper-input element. So I tried:
<dom-module id="my-element">
<style>
:host {
--paper-input-container-label: #fff;
--paper-input-container-label-focus: #fff;
}
</style>
<template>
<paper-input-container>
<label>My Label</label>
<input is="iron-input" value="{{someval}}">
</paper-input-container>
</template>
...
As far as I understand you cannot style
<paper-input .... ></paper-input>
and you have to use paper-input-container , right ?
Anyway,the styling options applied above nothing gets actually styled. But, when I, for example, use
--paper-input-container-color: #fff;
it does work (but is not what I want). Any suggestions how to fix this ?
1 answers
solution1
3 ACCPTED 2015-10-12 09:07:30
paper-input provides several possibilities to style it. Some css parameters are simple values - such as your --paper-input-container-color . Others – like --paper-input-container are mixins where you can adjust anything you want. To re-define your mixin see the docs here .
What is also very helpful is to have a look at your page's header where all the custom styles are applied. For instance search for the element <style scope="paper-input-container"></style> and have a look what is being defined by polymer and how these styles are applied. If you add your own <style> element in your template it will be somewhere in the <head> and take care how the css selectors are transformed.
Hope these explanations lead you your way to achieve what you want...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.