Сделать ввод невидимым через css?

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

Я решил, что просто поместил оба поля ввода в один и тот же контейнер, а затем через свою таблицу стилей установил для одного из них display:none; Это скрывает поле, но все равно занимает место. Я также пытался установить высоту и ширину на 0 или установить видимость скрытой или свернуть, но ничего из этого не сработало.

До сих пор все элементы брендинга можно было выполнять с помощью таблиц стилей css, поэтому я хотел бы сохранить это. Решение должно как минимум поддерживаться в IE6 и выше, Firefox 2 и выше и Chrome (последняя версия).


html hide css
person Boris Callens    schedule 03.07.2009    source источник
comment
Вы вообще используете серверный код? Если это так, вы можете условно отображать одно или другое поле, а не делать это с помощью стилей или скрипта.   -  person Joe Chung    schedule 03.07.2009
comment
да, это то, что я делаю сейчас. Но, как я уже говорил, я хотел бы сохранить брендинг только в css. Теперь мне нужно поддерживать брендинг как в представлениях, так и в таблицах стилей.   -  person Boris Callens    schedule 03.07.2009
comment
Почему вы хотите сохранить изменения брендинга только в CSS? CSS используется только для стилизации — если ваш брендинг включает изменение структуры HTML, соответствующее место для обработки этого находится в HTML.   -  person edeverett    schedule 03.07.2009
comment
Потому что основная функциональность в основном одинакова. Разница лишь в приоритете факторов поиска. Поскольку мой частичный первый показывает только несколько полей (самых важных), было бы неплохо просто скрыть остальные.   -  person Boris Callens    schedule 03.07.2009

Ответы (7)


arrow_upward
13
arrow_downward

Как насчет установки невидимого поля ввода на position: absolute;, что должно убрать его из потока рендеринга.

Однако установка его на display: none теоретически должна сделать то же самое...

person peirix    schedule 03.07.2009
comment
Дисплей: ни один не помог. Однако в сочетании с position:absolute это так. Вы думаете, что можете дать мне объяснение, почему? - person Boris Callens; 03.07.2009
comment
position: absolute удалит любой элемент из потока рендеринга, благодаря чему он не повлияет на любой другой элемент вокруг него. Это очень распространенный метод для оверлеев и модальных окон. - person peirix; 03.07.2009
comment
Может быть, он слишком старый, он больше не работает (к сожалению, Т.Т.) - person Nguyen Tan Dat; 22.01.2018

arrow_upward
15
arrow_downward

почему бы вам не использовать ввод type="hidden"?

person bdo334    schedule 03.07.2009
comment
Это было бы хорошо. В идеале HTML, представляемый пользователю, должен иметь смысл без использования CSS. - person edeverett; 03.07.2009
comment
Это распространит мою логику брендинга на таблицу стилей и представления. Теперь мне нужно поддерживать логику брендинга в двух местах вместо одного. - person Boris Callens; 03.07.2009
comment
Запутанное разделение ответственности в технологиях, которые вы используете для быстрой выгоды, редко является путем к легко поддерживаемому коду. - person edeverett; 03.07.2009
comment
И как вы видите связь вашего приговора с моим делом? Таблицы стилей предназначены для определения графического интерфейса. Брендинг — это чистый графический интерфейс. Функционал точно такой же. Здесь нет быстрой выгоды. Быстрый выигрыш заключается в условном рендеринге. Теперь всякий раз, когда добавляется бренд, я должен убедиться, что мой условный рендеринг также учитывает новый бренд. - person Boris Callens; 03.07.2009
comment
Это не сработает, если вы реализуете clipboard.js, поэтому в этом сценарии будет более подходящим другой ответ. - person Felipe The Mentor; 29.10.2016

arrow_upward
6
arrow_downward 

<style>
.hideme
{
    display:none;
    visibility:hidden;
}
.showme
{
    display:inline;
    visibility:visible;
}
</style>


<input type="text" name="mytext" class="hideme">

Вы можете установить class="hideme", чтобы скрыть элемент управления, или class="showme", чтобы показать элемент управления. Вы можете установить это переключение с помощью JavaScript или кодирования на стороне сервера.

person Bhaskar    schedule 03.07.2009
comment
Это видимость: скрыта, не видна: ложь, и ее видимость: видна, не видна: истина. - person Joe Chung; 03.07.2009
comment
Пожалуйста, обратитесь к последнему предложению второго абзаца в моем сообщении. - person Boris Callens; 03.07.2009

arrow_upward
3
arrow_downward

Это скрывает поле, но все равно занимает место.

Этого не должно происходить; display: none должен привести к тому, что элемент не будет включен в поток. Проверьте остальную часть вашего CSS (попробуйте использовать Firebug, чтобы выяснить, откуда берется дополнительное «пространство», которое, вероятно, является просто отступом или отступом от какого-либо окружающего элемента).

person Rahul    schedule 03.07.2009
comment
Я думаю, это единственный способ сделать это с помощью CSS (как следует из вопроса)... - person Bhaskar; 03.07.2009

arrow_upward
0
arrow_downward

Я не очень хорошо знаком с CSS, но вы можете попробовать реализовать JQuery, который сочетает в себе Javascript и CSS, чтобы вы могли делать разные вещи. так с относительной легкостью.

person Maxim Zaslavsky    schedule 03.07.2009
comment
Я знаю, но, если возможно, я бы предпочел не полагаться на JS, поскольку он также будет работать на машинах без JS. - person Boris Callens; 03.07.2009
comment
Ох, ну ладно! Я новичок в StackOverflow, так что мне удалить свой ответ? Спасибо! - person Maxim Zaslavsky; 03.07.2009
comment
Нет, просто оставить как есть. Это правильный ответ, просто не лучший;) - person Boris Callens; 03.07.2009

arrow_upward
0
arrow_downward

Использование свойства видимости занимает пространство для рендеринга, даже если элемент не виден. Вместо использования видимости вы должны использовать свойство отображения.

Вы можете установить для отображения значение нет, если хотите скрыть элемент и отобразить его заблокировать< /strong> или inline, если вы хотите их показать.

Чтобы посмотреть на дисплей, проверьте это

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

Не могли бы вы опубликовать полный код?

person rahul    schedule 03.07.2009

arrow_upward
0
arrow_downward

Вы можете сделать это, если хотите изолировать код css от другого ввода:

input[type="checkbox"] {
    display: none;
}

Вы также можете дополнительно изолировать его от того же типа, указав другой класс.

person Karlo J.    schedule 31.05.2020