How to customize a disabled paper-input element in Polymer 1.0?

Help with Polymer 1.0:

I've encountered an issue where setting a paper-input element to 'disabled' results in very light gray text and underline, making it hard to read. I've been trying to use CSS to change the text color but haven't had success so far. Here is my attempt:

--paper-input-container-input-disabled {
    color: black;
}

<paper-input label="Email" disabled></paper-input>

Unfortunately, this code doesn't change the text color, only the background color according to the same mixin.

csspolymermaterial-designweb-component

Answer №1

The online document incorrectly states the name. It should actually be --paper-input-container-disabled. Therefore, the correct code would be as follows:

paper-input {
  --paper-input-container-disabled: {
    opacity: 0.66;
  };
}

It is important to note that the default opacity is currently set at 0.33. Consider adjusting it slightly for better visibility.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Integrating CSS with Material-UI in a React project: A step-by-step guide

I am currently developing a project using React (along with TypeScript) and the Material-UI library. One of my requirements is to implement an animated submit button, while replacing the default one provided by the library. After some research, I came acr ...

javascriptcssreactjsmaterial-ui

What is the best way to add a darker tint to the background behind my overlay panel in jQuery

After grabbing the panel code from the jQuery Mobile website and integrating it into my file, I am interested in changing the appearance. I want to either darken or blur the background content when the panel is displayed. I attempted to use filter:blur(5px ...

jquerycssjquery-uijquery-mobile

Hover over the image to trigger animation effects

Looking for a way to enhance my current jQuery script that creates an orange transparent hover effect over images. How can I add animations, specifically a fade in and out effect? $(document).ready(function() { $('#gallery a').bind('mo ...

jqueryhtmlcssjquery-uijquery-animate

What is the best way to display these images correctly within a slider?

My goal is to display 4 images/company logos per slide, but they all end up clustered on one slide. Despite my efforts to adjust the CSS, nothing seems to work. This is what my code currently renders: Here are the react component codes I am using: To se ...

javascripthtmlcssreactjscodesandbox

Personalizing the design of Bootstrap

As a beginner in working with Bootstrap, I am currently focused on creating an index html page for an online shop. For reference, here is an example - https://jsfiddle.net/a393wtng/1/ Upon resizing the output frame, it becomes apparent that 4 products can ...

htmlcsstwitter-bootstrap

What is the best way to align product cards side by side instead of stacking them on separate lines?

I am currently working on a mock-up website for a school project. For this project, I am developing a products page where I intend to showcase the items available for sale. Although I managed to successfully copy a template from w3schools, my challenge lie ...

htmlcss

learn the technique I use to incorporate a see-through background in HTML

Is there a way to enclose a specific section of text with a background to improve readability, considering that changing the text color is not the preferred solution due to an existing background image? ...

htmlcss

Guide on inserting a dropdown menu following a specific count of <li> elements using Javascript or Jquery

I am currently working on an HTML project <div class="ktmsg"> <ul> <li class="a1"> <a title="Link Tools" href="#"> … </a> </li> <li class="a2"> <a title="Link Tools" href="#"> ...

javascriptjqueryhtmlcss

Looking for assistance with aligning a form in the center?

After spending the last hour trying to center a form for a name without success, I have decided to seek help here. Although I have searched extensively, I am still struggling at this point. Here is my HTML: <div id="main" class="main"> <tabl ...

htmlcssformsinputalignment

Modifying jQuery CSS causes certain CSS rules from a file to be deleted

When using jQuery to change the css of an element, I've noticed that it can remove some previously specified css rules for that element. For example, .className, .className2, etc... { background-color: black; color : silver; } .className: ...

jqueryhtmlcss

Utilizing Python Selenium to Interact with Buttons

Encountering an issue while trying to use Selenium to click on a tab or button within my web application. Below are the code snippet and CSS selectors: Error message: selenium.common.exceptions.NoSuchElementException: Message: Unable to locate element: #t ...

jquerypythonhtmlcssselenium

The content within a select tag is experiencing vertical misalignment

The select tag on my page is behaving oddly - when there is a value in it, it is aligned to the bottom vertically. Upon inspecting the CSS, I noticed that the only styles applied are font size and type. Strangely, removing the doctype from the page resol ...

htmlcsshtml-select

Having trouble loading background color or image in three.js

I've been struggling to load a background image or color on my webpage. Despite trying various methods, including commenting out javascript files and checking the stylesheet link, nothing seems to work. Even when I load the three.js scene with javascr ...

javascriptcssthree.js

Toggle the class and execute the order within a jQuery script

When the mouse moves in, the jQuery trigger enters the status. $(".test").bind("mouseenter mouseout", function(event) { $(this).toggleClass("entered"); alert("mouse position (" + event.pageX + "," + event.pageY + ")"); }); .entered { ...

javascriptjqueryhtmlcss

blurred image effect on bootstrap card hover

My attempt to create a blurred image effect on a bootstrap card hover is not working as expected. The blur effect works fine without the hover. Here is the code I have been using: .card-img { transition: all 1s ease; -webkit-filter: blur(0px); ...

htmlcssbootstrap-4

What could be causing the shadowbox not to display in Internet Explorer?

I am currently working on fixing a shadowbox issue in Internet Explorer. The page where the shadowbox is located can be found at this link: Here is the HTML code: <div class="hero-image"> <a href="m/abc-gardening-australia-caroli ...

javascriptjqueryhtmlcssshadowbox

Ways to align content on navbar (Bootstrap 5)

I am currently working on a minimal navbar design using Bootstrap 5. In this setup, there are two main elements - the 'navbar-brand' for the logo/brand and the navigation links. My goal is to have the brand/logo aligned all the way to the left, ...

htmlcssbootstrap-4bootstrap-5

Is there a way to adjust the position of the scrolling bar to be closer to the post area?

I was exploring this page (http://noahsdad.com/state-fair-texas-2011/) and noticed a scrolling sidebar to the left of the content area. I'm looking to adjust it so that it is closer to the content area. Any suggestions on how to achieve this? Thank y ...

css

The horizontal navigation bar will not extend the entire length of the page

I'm facing an issue with my horizontal navigation bar as it doesn't span the entire screen. I need help figuring out how to make it full-width. You can see what I mean here. Additionally, once the navigation bar spans the screen, I want the image ...

htmlcss

Developing a Highchart Graph using JavaScript

I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...

javascriptjqueryhtmlcss