CODEWITHSUNDEEP
cursorpolymerelement
debilausaure
debilausaure

Reputation: 21

Polymer 1.0 - Add custom style properties and a cursor to paper-inputs

I am working with Polymer and its paper-input. I'm a novice, this is my first big HTML project.

I'm trying to change a few things about these inputs, because when they get focused, they give no indication whether they're indeed selected or not.

Here's a paper-input demo.

1) I'd like to make the label and the underline change color when it get focused

2) I'd also like to get a blinking cursor

I already tried to add a custom style property inside paper-input.html (the doc here)

<dom-module id="paper-input">

  <style>

    ...

    :host{
      --paper-input-container-focus-color : blue;
    }

  </style>

I also checked this thread, adding this to the head section of my HTML:

<!-- custom style applied to the elements -->
<style is="custom-style">
    paper-input{
        /* Label and underline color when the input is focused */
        --paper-input-container-focus-color: blue;
    }
</style>

But my paper-inputs did not change at all with both these solutions. I obviously misunderstood...

Now I don't know how to bring a blinking cursor into this field. Neither the doc, nor internet gave me a clue about it.

I'd like to know if you have any ideas on this ! Thanks :)

Upvotes: 0

Views: 560

Answers (1)

debilausaure
debilausaure

Reputation: 21

Alright, maybe it was a lack of googling ^^'

In fact, both these features are actually implemented. It just stopped working since 1.0.4 as described here. So you can just stick to 1.0.3 until it is fixed.

I hope this will help other people !

Upvotes: 0

Related Questions