I want to format a <paper-input disabled ... element to appear NOT disabled (i.e., not have the text lightened out).
Below in my code (and in this jsBin) I show what I have tried so far.
How can I accomplish this? (Please provide a working demo. Ideally, a clone of the subject jsBin.)
http://jsbin.com/giguwoyoha/1/edit?html,output<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
/* Here is what I have tried so far */
paper-input[disabled] {
--paper-input: {
color: black;
}
}
paper-input {
--paper-input-disabled: {
color: black;
}
}
paper-input {
--paper-input-container-disabled: {
color: black;
}
}
paper-input[disabled] {
color: black;
}
*[disabled] {
color: black;
}
</style>
<paper-input value="This is enabled text. I want to format the below to look like this."></paper-input>
<paper-input value="This is disabled text. I want to format this to look like the above."
disabled></paper-input>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
<style>
:host paper-input[disabled] {
--paper-input-container-input-color: red;
--paper-input-container-disabled: {
opacity: 1;
}
}