Polymer 2.0 paper-input file custom style

Question

I would like to add some custom style to polymer <paper-input type="file">

Tried code below:

 HTMLImports.whenReady(() => { Polymer({ is: 'x-foo' }); });

 <head> <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="paper-input/paper-input.html"> <link rel="import" href="iron-validator-behavior/iron-validator-behavior.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <style> paper-input.choose-file { --paper-input-container: { float: left; width: 150px; height: 50px; background: red; overflow: hidden; } --paper-input-container-underline: { border-color: transparent; } input[type="file"] { display: block !important; width: 150px !important; height: 50px !important; opacity: 0 !important; overflow: hidden !important; } } </style> <paper-input type="file" class="choose-file"></paper-input> </template> </dom-module> </body>

something like: https://jsfiddle.net/9sft3yd6/

can anyone help?

Answer 1

I think You may customizing input with iron-input element with the same way of your link. Something like:

DEMO

<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
paper-input.choose-file {
  --paper-input-container: {
    float: left;
    width: 150px;
    height: 50px;
    background: green;
    overflow: hidden;
  }
  --paper-input-container-underline: {
    border-color: transparent;
  }
}

iron-input {
  padding: 10px;
  background: red;
  display: table;
  color: #fff;
}

input[type="file"] {
  display: none;
}

</style>
<paper-input type="file" class="choose-file"></paper-input>
  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />
<iron-input>
  <label id="#bb"> Select Your File
  <input type="file" id="File"   size="60" > 
  </label>
</iron-input> 

</template>
  </dom-module>
</body>

Answer 2

I have used this solution.

 HTMLImports.whenReady(() => { Polymer({ is: 'x-foo' }); });

 <head> <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="paper-input/paper-input.html"> <link rel="import" href="iron-validator-behavior/iron-validator-behavior.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <style> * { box-sizing: border-box; } paper-input.choose-file { box-sizing: border-box; float: left; width: 0; padding: 0; cursor: pointer; --paper-input-container: { display: flex; padding: 0; } --paper-input-container-underline: { border-color: transparent; } --paper-input-container-shared-input-style: { opacity: 0; width: 150px; height: 50px; cursor: pointer; display: flex; } } .btn-choose { float:left; width: 150px; height: 50px; padding: 15px; background: red; color: white; text-align: center; box-sizing: border-box; } </style> <paper-input type="file" class="choose-file"></paper-input> <label class="btn-choose">Choose file</label> </template> </dom-module> </body>

Polymer 2.0 paper-input file custom style

Question

2 answers

solution1
1 2019-01-19 16:09:10

solution2
1 2019-01-21 08:32:49

Polymer 2.0 paper-input file custom style

Question

2 answers

solution1 1 2019-01-19 16:09:10

solution2 1 2019-01-21 08:32:49

solution1
1 2019-01-19 16:09:10

solution2
1 2019-01-21 08:32:49