1

I'm trying to align the text to have the same padding as the choose file button.

input[type='file'] {
    background: #000;
    border-radius: 5px;
    color: #fff;
    font-family: "Marmellata", sans-serif;
    padding: 6px 10px 14px 17px;
    font-size: 20px;
    margin-bottom: 20px;
    width: 240px;
    vertical-align: top;
    margin-top: 0px;
}

<input name="t1" class="imgupload" type="file" accept="image/*" capture="camera">

EDIT:

I have solve the problem by using this method:

.select-image-btn input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        }

.select-image-btn {
        position: relative;
        overflow: hidden;
        display: inline-block;
        }

Just add class name on

input[type=file]

The div should be like this

<div class="select-image-btn">
      <button class="btn default" >Upload a file</button>
      <input type="file" name="t1" accept="image/*" capture="camera">
</div>
4

1 に答える 1

-1

以下を使わないのはなぜですか？

input.imgupload {
background: #000;
border-radius: 5px;
color: #fff;
font-family: "Marmellata", sans-serif;
padding: 6px 10px 14px 17px;
font-size: 20px;
margin-bottom: 20px;
width: 240px
vertical-align: top;
margin-top: 0px;
}

とにかく、クラスには属性セレクターよりも強い重みがあります。

于 2013-05-15T03:24:57.633 に答える