Блог

Главная - Вопросы по программированию - CSS, чтобы скрыть не скрывая границы

CSS, чтобы скрыть не скрывая границы

#jquery #html #css

#jquery #HTML #css

Вопрос:

Я создаю приложение с помощью jquery mobile, и у меня есть функция, которая позволяет пользователю нажимать на изображение, которое открывается

<input type="file" name="file" id="file" onchange="submitForm(this)" capture="camera" class="hideme" accept="image/*" />

Это работает хорошо, однако мне нужно, чтобы поле ввода было скрыто. Я написал следующий код:

 .hideme
 { 
 display:none; 
 visibility:hidden; 
 border: 0px;
 }

но все, что это делает, это скрывает текст внутри поля, на самом деле он не скрывает контур. Есть идеи о том, как я могу избавиться от этого? js скрипка здесь http://jsfiddle.net/DLC4Y /

Комментарии:

1. Пожалуйста, посмотрите мой ответ и дайте мне знать, если он не работает, я его обновлю

2. почему display:none и visibility:hidden в том же классе?

3. display : none должно быть достаточно! Убедитесь, что вы не перезаписываете CSS где-то еще ( jsfiddle.net/D9T6v )

4. пожалуйста, посмотрите Мой jsfiddle — я добавил его в исходный вопрос

5. jQuery mobile добавляет <div> элемент в ваше <input> поле. Граница исходит от этого элемента div, а не от вашего ввода. Поэтому вам нужно удалить это <div> . проверьте мой ответ

Ответ №1:

ДЕМОНСТРАЦИЯ

Используйте это,

 $('#file').parent().hide();

jQuery mobile добавляет <div> элемент в ваше <input> поле. Граница исходит от этого элемента div, а не от вашего ввода. Итак, вам нужно удалить это <div>

или

Добавьте это в CSS.

Демонстрация CSS

 .ui-input-text{
    display:none; 

}

Комментарии:

1. привет — как я могу сказать, что я хочу изменить .ui-input-text, но только для #file? Я знаю глупый вопрос!

2. у вас нет parent селектора в CSS. вы должны использовать jQuery там

3. когда я использую этот $(‘#file’).parent().hide(); он также скрывает изображение в моей форме:(

4. можете ли вы предоставить полный html

5. У меня получилось, я завернул #file в div. Спасибо за вашу помощь! 😀

Ответ №2:

display: none; должно быть достаточно — он полностью скрывает элемент, включая границы.

Это то, что я использую, у меня нет визуальных или технических проблем:

 <style>
.hide-me { display: none; }
.i-am-a-link { cursor: pointer; }
</style>

<label for="image-upload" class="i-am-a-link">
    <img src="placeholder.jpg"
         id="image-upload-label">
</label>

<input type="file" id="image-upload" class="hide-me">

Комментарии:

1. Правильно, не уверен, почему все пытаются скрыть границу, когда ничего не видно, а элемент не занимает места в DOM…

2. это ничего не скрывает, даже текст.

3. Используйте инспектор CSS, чтобы увидеть, какие правила применяются к вашему вводу… Это решение правильное

4. взгляните на jsfiddle, который я добавил к своему вопросу. Спасибо

Ответ №3:

border: 0px;

это то, что вы упоминаете

где так и должно быть

border: none;

Ответ №4:

Убедитесь, что вы не переопределяете CSS в другой части файла, также вам, вероятно, следует использовать

 border: none;

Вы также могли бы использовать !important on it, чтобы переопределить любой CSS, который позже изменит свойство.

 border: none !important;

Ответ №5:

Вот ваше решение:

Удалите ваши предыдущие стили, связанные с hideme классом (т.е. .hideme ), и добавьте следующий класс.

 .ui-body-c, .ui-overlay-c{
    border: none;
    box-shadow: none;
}

Хорошего дня.

Метки: