Тип ввода = файл показывает неправильно в IE8-9

Question

Тип ввода = файл показывает неправильно в IE8-9

0

У меня большой проект и много стилей css. И у меня есть тип входного файла, который показывает неправильные значения в ie8 и ie9. Я просто вижу фоновый цвет и текст "Обзор...". Итак, когда я исключаю границу из стиля с помощью инструментов разработки в IE... это показывает правильность. Но я не могу удалить границу с помощью js или css. Когда я устанавливаю значение по умолчанию: border: medium none # 000, он не работает. Возможно, это унаследовал стиль. Как удалить пограничный стиль из элемента ввода.

У кого-нибудь была эта проблема? Мне нужна кнопка по умолчанию для управления входным файлом. Как я могу использовать js (jQuery) или css? У IE есть собственный стиль для элементов?

HTML:

<input name="ImportFileInp$InputField" class="cs-fileinput" id="ImportFileInp_InputField"           type="file"/>

CSS:

.cs-fileinput {
    width: 71px;
    margin-left:5px;
}

но в браузере я вижу: border: 0px none currentColor

Val Yar 04 март 2014, в 12:27

Источник

3

Укажите ваш код
Pavlo 04 март 2014, в 11:10
0

Можете ли вы показать свою проблему в скрипке ? Что касается меня, то с borders проблем нет, если просто использовать код, который вы указали в вопросе. Таким образом, предполагая, что у вас есть некоторый дополнительный css или javascript который переопределяет стиль вашего input
Pavlo 04 март 2014, в 12:07
0

jsfiddle.net/L6VLC выглядит так. Смотрите это в IE8 (или IE9) и FF.
Val Yar 04 март 2014, в 12:46
0

Я пытался сделать это jsfiddle.net/L6VLC/2
Val Yar 04 март 2014, в 13:20
0

Таким образом, кнопка просто обрезается в середине?
user3173360 04 март 2014, в 14:02
0

Это не имеет значения. Кнопка показывает неправильно в IE8-9. Можно установить больше ширины. jsfiddle.net/L6VLC/5
Val Yar 04 март 2014, в 14:07
0

Вы должны сделать что-то вроде Настроить кнопку загрузки - поскольку у каждого браузера свой стиль для <input type="file" /> это проблема не только IE.
Pavlo 04 март 2014, в 15:22
0

Спасибо большое за помощь!
Val Yar 05 март 2014, в 06:24
0

@ValYar. Добро пожаловать. Кроме того, я перенес свое предложение в ответы, поэтому, если оно решило вашу проблему, отметьте его как правильное. Благодарю.
Pavlo 05 март 2014, в 08:15

Показать ещё 7 комментариев

Теги:

javascript

jquery

html

css

internet-explorer-8

1 ответ

Ещё вопросы

Можете ли вы показать свою проблему в скрипке ? Что касается меня, то с borders проблем нет, если просто использовать код, который вы указали в вопросе. Таким образом, предполагая, что у вас есть некоторый дополнительный css или javascript который переопределяет стиль вашего input
jsfiddle.net/L6VLC выглядит так. Смотрите это в IE8 (или IE9) и FF.
Я пытался сделать это jsfiddle.net/L6VLC/2
Таким образом, кнопка просто обрезается в середине?
Это не имеет значения. Кнопка показывает неправильно в IE8-9. Можно установить больше ширины. jsfiddle.net/L6VLC/5
Вы должны сделать что-то вроде Настроить кнопку загрузки - поскольку у каждого браузера свой стиль для <input type="file" /> это проблема не только IE.
@ValYar. Добро пожаловать. Кроме того, я перенес свое предложение в ответы, поэтому, если оно решило вашу проблему, отметьте его как правильное. Благодарю.

Pavlo · Accepted Answer · 2014-03-05T05-22-00.000Z

В соответствии с нашим обсуждением вы должны настроить свою кнопку загрузки.
Проблема не только в браузере IE. Каждый браузер имеет другой стиль (собственный стиль) для кнопки <input type="file"/>.

Вот пример того, как вы можете настроить свою кнопку загрузки:
HTML-код

<div class="custom-upload">
  <input type="file">
  <div class="fake-file">
      <input disabled="disabled" >
  </div>
</div>

CSS

.custom-upload {
  position: relative;
  height: 40px;
  width: 350px;
  margin:30px;
}

.custom-upload input[type=file] {
  outline:none;
  position: relative;
  text-align: right;    
  -moz-opacity:0 ;
  filter:alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
  width:100%;
  height:100%;  
}

.custom-upload .fake-file {
  background:url(http://www.fold3.com/i/upload-icon.png) center right no-repeat;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 350px;
  padding: 0;
  margin: 0;
  z-index: 1;
  line-height: 100%;
}

.custom-upload .fake-file input {
  font-size:16px;
  height:40px;
  width:300px;
}

Код JavaScript

$('.custom-upload input[type=file]').change(function(){
  $(this).next().find('input').val($(this).val());
});

Таким образом, вы можете просто изменить backgroung в .custom-upload.fake-file class для любого изображения, которое вы хотите, и оно будет иметь одинаковый вид во всех браузерах.