CODEWITHSUNDEEP
polymerpolymer-1.0
user1068477
user1068477

Reputation:

Polymer Input Field - Possible to make look more like std html input field?

Is it possible to render the Polymer input field to appear more like a standard html text input field vs the (unfortunate design choice of an) underlined text field? I have googled, but surprisingly cannot find anything that discusses how to achieve this, with examples.

Ref: https://elements.polymer-project.org/elements/paper-input?active=paper-input-container#styling

I don't see a "background-color" setting. The "container" is always referred to as the "underline".

Update:

I can probably achieve the effect by making a paper-input a child of a paper-card; make the background of the card, white; then size the card to the input field. Since the paper-card has a sharp drop-shadow effect, the field should pop in a similar way to a standard html input field, but will conform to the styling and appearance expected of the framework.

Upvotes: 0

Views: 128

Answers (1)

tony19
tony19

Reputation: 138696

The documentation you linked to lists the available custom properties and mixins that would indeed allow fine-grain control of the styling, including background-color and the underline. It doesn't explicitly list background-color or any other CSS because you'd be able to set that within the custom CSS mixin you provide, as described by the Polymer docs, which note:

It may be tedious (or impossible) for an element author to predict every CSS property that may be important for theming, let alone expose every property individually.

To change the background color of the inner input, you would set the --paper-input-container-input CSS property to a custom mixin, containing background-color:

paper-input {
  --paper-input-container-input: {
    background-color: rgba(0,0,0,0.1);
  }
}


HTMLImports.whenReady(() => {
  Polymer({ is: 'x-foo' });
});
<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-input.gray {
          --paper-input-container-input: {
            background-color: rgba(0,0,0,0.1);
          }
        }
      </style>

      <paper-input class="gray" label="Inner Gray Background"></paper-input>
    </template>
  </dom-module>
</body>

To hide the underline in the 3 possible states (default, focus, and disabled), you'd set the corresponding --paper-input-container-underline to a mixin, containing display: none:

paper-input {
  --paper-input-container-underline: {
    display: none
  }
  --paper-input-container-underline-focus: {
    display: none
  }
  --paper-input-container-underline-disabled: {
    display: none
  }
}


HTMLImports.whenReady(() => {
  Polymer({ is: 'x-foo' });
});
<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-input.no-underline {        
          /* hide underline in all states */
          --paper-input-container-underline: {
            display: none
          }
          --paper-input-container-underline-focus: {
            display: none
          }
          --paper-input-container-underline-disabled: {
            display: none
          }
        }
      </style>

      <paper-input class="no-underline" label="No Underline"></paper-input>
    </template>
  </dom-module>
</body>

codepen

Upvotes: 0

Related Questions