Geek Answers Handbook

Polymer - Turn off gray background when pressed

I study Polymer. The application I create to learn Polymer uses the paper-item element. I chose paper-item for its appearance. However, when I click on the paper element, the background changes to dark gray. How to remove this behavior? I want the background paper-item always be white. However, it is not possible to determine how to set the background color when clicking or selecting paper-item .

Thank you for your help and a great holiday season!

+2
source share
2 answers

I think this is a focused behavior that needs to be changed by overriding mixin:

 <template> <style> :root /* or paper-item */ { --paper-item-focused: { background-color: white; } } </style> <paper-item></paper-item> </template>

If this does not work, try --paper-item-selected instead of --paper-item-focused .

+2
source

I think you are looking for this:

 paper-item:focus::before, paper-item:focus::after { color: white; opacity: 0; }

This rule cancels the rules from "bower_components / paper-item / paper-item-shared-styles.html":

 :host(:focus):before, .paper-item:focus:before { @apply(--layout-fit); background: currentColor; content: ''; opacity: var(--dark-divider-opacity); pointer-events: none; @apply(--paper-item-focused-before); }

I don’t know where to import the rule on "paper-item: focus :: after", but in my Chrome Developer console I see this and I need to redefine it to get the desired behavior.

Hello

+1
source

More articles:


All Articles