Styling asp file upload browse button

Question

У меня есть кнопка asp с определенным стилем. но когда я применяю тот же стиль к asp file upload control, только изменение фона в этот стиль. Кнопка просмотра остается прежней.

Asp код

<div> 
    Please Select Excel File: 
    <asp:FileUpload ID="fileuploadExcel" runat="server" CssClass="addkey_btn" />&nbsp;&nbsp; 
    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" OnClientClick="showDivPageLoading();" CssClass="addkey_btn" /> 
</div> 

CSS является

.addkey_btn { 
    background: none repeat scroll 0 0 #00B7CD; 
    border: 0 none; 
    color: #FFFFFF; 
    cursor: pointer; 
    font-family: 'Altis_Book'; 
    font-size: 15px; 
    padding: 3px 15px; 
} 

Я хочу, чтобы применить те же CSS кнопку Browse и в кнопке Upload. Какие-либо предложения?

EDIT1 Любой чистый способ использования CSS?

Answer 1

Ваш ответ может быть проживаете here, here и here

Answer 2

вы можете стиль label и поместить его в верхней части выбрать кнопку файла

.btn, 
 
label.choose:before { 
 
    background: none repeat scroll 0 0 #00B7CD; 
 
    border: 0 none; 
 
    color: #FFFFFF; 
 
    cursor: pointer; 
 
    font-family: 'Altis_Book'; 
 
    font-size: 15px; 
 
    padding: 3px 15px; 
 
} 
 
label.choose:before { 
 
    content: 'Choose file'; 
 
    padding: 3px 6px; 
 
    position: absolute; 
 
}

<div> 
 
    <label class="choose"> 
 
    <input id="browse" type="file" /> 
 
    </label> 
 
    <input class="btn" type="button" value="Submit" /> 
 
</div>

Answer 3

Это очень трудно стиль input[type=file] надежно в браузерах. Единственное кросс-браузерное решение - это тот, который демонстрирует @Vitorino, используя label и/или псевдоэлементы, чтобы скрыть фактический input, а затем вместо этого стилизовать этот элемент/псевдоэлемент.

Этот ответ не повторяет этого, но предлагает чистую альтернативу CSS, которая зависит от браузера. Тем не менее, это не должно использоваться на производственных веб-сайтах, это просто доказательство концепции или демонстрация.

Современные браузеры реализуют несколько нестандартных расширений, позволяющих настраивать пользовательские элементы до сих пор невидимых элементов. Это позволяет разработчикам в значительной степени переопределять таблицу стилей пользователя-агента по умолчанию.

Пользовательские-расширения:

В частности, для input[type=file] по крайней мере, Trident (для IE-10 и выше) и Webkit (для Chrome, Safari) позволяют моделирование этого элемента до некоторой степени, не прибегая к хаки, подобные скрытым элементам, или абсолютно позиционированные псевдоэлементы. Для этого случая, конкретного производитель расширение нашего интереса является:

1. -webkit-appearance (для включения переопределения стиля агента пользователя в Webkit-браузерах)
2. ::-webkit-file-upload-button (чтобы включить стилизации кнопку просмотра в Webkit браузеров)
3. ::-ms-browse (чтобы включить стилизации кнопку просмотра в браузерах Trident основе, то есть IE)
4. ::-ms-value (для того, чтобы стиль ввода текста в Trident браузерах, т.е.IE)

Предостережения:

1. К сожалению, нет -moz- расширений для этого в браузерах на основе Gecko/Mozilla. В частности, по крайней мере Firefox не позволяет моделировать кнопку.
2. IE не позволяет изменять положение просматривать кнопку справа налево. Должна быть дополнительно проверена, возможно, она использует -ms-flex для управления этим?

Демо:

Пример Фидл: http://jsfiddle.net/abhitalks/hxv19bbg/7/

Пример Сниппет:

Следующий фрагмент будет работать отлично в IE-10/11 и хромирование 39 (это то, что я тестировал), но не будет работать с Firefox.

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
div { margin: 8px; } 
 
input[type=file], input[type=file] + input { 
 
    display: inline-block; 
 
    background-color: #eee; 
 
    border: 1px solid gray; 
 
    font-size: 15px; padding: 4px; 
 
} 
 
input[type=file] + input { 
 
    padding: 13px; 
 
    background-color: #00b7cd; 
 
} 
 
::-webkit-file-upload-button { 
 
    -webkit-appearance: none; 
 
    background-color: #00b7cd; 
 
    border: 1px solid gray; 
 
    font-size: 15px; padding: 8px; 
 
} 
 
::-ms-browse { 
 
    background-color: #00b7cd; 
 
    border: 1px solid gray; 
 
    font-size: 15px; padding: 8px; 
 
} 
 
input[type=file]::-ms-value { border: none; }

<div> 
 
    <label>Select File: </label> 
 
    <input id="browse" type="file" /> 
 
    <input class="btn" type="button" value="Submit" /> 
 
</div>