Question

我想为聚合物<paper-input type="file">添加一些自定义样式

下面尝试过的代码：

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>

类似的东西： https://jsfiddle.net/9sft3yd6/

有人可以帮忙吗？

Answer 1

我认为您可以使用链接的相同方式使用iron-input元素自定义输入。像这样：

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

我已经使用了此解决方案。

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纸张输入文件的自定义样式

2 个答案: