Cannot apply --paper-input-container-shared-input-style to the input

[MWalid]

Description

I can't @apply --paper-input-container-shared-input-style;.

When I defined the mixin under html selector in shared-styles I was able to apply it to my input.

<dom-module id="shared-styles">
  <template>
    <style>
      html {
        --paper-input-container-shared-input-style: {
          position: relative; /* to make a stacking context */
          outline: none;
          box-shadow: none;
          padding: 0;
          width: 100%;
          max-width: 100%;
          background: transparent;
          border: none;
          color: var(--paper-input-container-input-color, var(--primary-text-color));
          -webkit-appearance: none;
          text-align: inherit;
          vertical-align: bottom;

          @apply --paper-font-subhead;
        };
      }
      ....

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

• [x] Chrome

[xelra]

So is this a bug or are we actually supposed to define the mixin ourselves? In the docs it says to use --paper-input-container-shared-input-style to make it look like a Material Design input, so it seems to be strange to leave everything up to the end user who could simply define anything.

Where did you get those CSS styles in the first place?

[xelra]

After spending days on this problem, I figured out that apparently in Polymer 2 the <iron-input> element does have all the styles from --paper-input-container-shared-input-style without setting or applying anything. The native input is overwritten by user agent stylesheets in the browsers I tested though. I fixed that by setting input { all: inherit; } which immediately styled the native input field in Material design. With that in mind, I think the documentation of paper-input-container doesn't make sense with respect to this mixin.

Here's a code snippet for anyone also running into this styling problem:

<style>
  input {
    all: inherit;
  }
</style>
<paper-input-container>
  <label slot="label">Your name</label>
  <iron-input slot="input">
    <input>
  </iron-input>
</paper-input-container>

I'd love to have some input for this from someone who actually knows what he's doing.

[kentokage]

I ran into the same issue as well and your workaround works well. Including paper-input-container in the style seems to cause issues in itself where the label and input are split apart left and right. The documentation should be updated to reflect this either providing your workaround or just make it automatically apply the styles to the child. We can use css to overwrite it if necessary

[xelra]

I've played a lot with the paper-input and paper-input-container elements in the last few months. While paper-input has some unfixable issues, at least with paper-input-container it's fixable locally.

The solution I've applied above is actually not a good solution, because the all property is not supported by some browsers.

So I've "stolen" the exact values from paper-input and those can simply be applied locally like in the code below. It also has a fix for the clipping of error messages. You will end up with a 4px taller element and the symmetry is slightly different.

I hope this helps someone until the Polymer team fixes their elements.

paper-input-container {
	padding-top: 0px;	// Originally 8px
	padding-bottom: 20px;	// Originally 8px
}

input {
	position: relative;
	outline: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	background: transparent;
	border: none;
	color: var(--paper-input-container-input-color, var(--primary-text-color));
	-webkit-appearance: none;
	text-align: inherit;
	vertical-align: bottom;
	min-width: 0;
	font-family: var(--paper-font-subhead_-_font-family);
	-webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);
	font-size: var(--paper-font-subhead_-_font-size);
	font-weight: var(--paper-font-subhead_-_font-weight);
	line-height: var(--paper-font-subhead_-_line-height);
}

<paper-input-container>
	<label slot="label">My awesome label</label>
	<iron-input slot="input">
		<input>
	</iron-input>
	<paper-input-error slot="add-on">My awesome error!</paper-input-error>
</paper-input-container>

[xelra]

In my comment above, I had a "fix" for the error messages being clipped, but it was not perfect. I've now properly identified the issue, so the code slightly changes.

:host {
	--paper-input-container: {
		overflow: inherit;
	}
}

input {
	position: relative;
	outline: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	background: transparent;
	border: none;
	color: var(--paper-input-container-input-color, var(--primary-text-color));
	-webkit-appearance: none;
	text-align: inherit;
	vertical-align: bottom;
	min-width: 0;
	font-family: var(--paper-font-subhead_-_font-family);
	-webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);
	font-size: var(--paper-font-subhead_-_font-size);
	font-weight: var(--paper-font-subhead_-_font-weight);
	line-height: var(--paper-font-subhead_-_line-height);
}

<paper-input-container>
	<label slot="label">My awesome label</label>
	<iron-input slot="input">
		<input>
	</iron-input>
	<paper-input-error slot="add-on">My awesome error!</paper-input-error>
</paper-input-container>

With this you get an input that is exactly (as of date) styled like a paper-input and the clipped error messages are also fixed. No symmetry changes.