Text field + эмулировать работу свойств div`а

klierik · July 4, 2011

Кто-то сталкивался с ситуацией когда требуется что бы

<input type="text" />

занимал всю допустимую ширину строки (в общем как обычный div) ?

Этого можно как-то добиться?

mishka · July 4, 2011

Бордеры, паддинги на родительский див/спан(display: block) а инпуту display: block; width: 100%

klierik · July 4, 2011

Бордеры, паддинги на родительский див/спан(display: block) а инпуту display: block; width: 100%

div по умолчанию имеет width: auto; а не 100%. Вариант не катит, так как если я положу рядом float-элемет то он попросту соскочит с текущей строки.

mishka · July 4, 2011

умолчанию имеет width: auto; а не 100%. Вариант не катит, так как если я положу рядом float-элемет то он попросту соскочит с текущей строки.

Дык я же говорю - оберни дивом. А инпуту 100% ширины.

Флоат элемент ложи не в див, возле инпута, а возле самого дива.

Только вот в ие7 наверное не получится... Ща протестирую

klierik · July 4, 2011

а вот если без дива? с ним то и так понятно что тут всё просто. но лишний элемент добавлять крайне не хотелось бы для таких задач.

я решил задачи через table-cell но "могучий" chrome всю малину поломал :dash:

rookie · July 4, 2011

А просто display:block/width:100% почему не катит?

klierik · July 4, 2011

А просто display:block/width:100% почему не катит?

потому что рядом лежащие элементы при таких правилах попросту слетят на следующую строку.

требуется что бы допустимой ширине строки с учетом float-элементов на ней же.

да и для того что бы растянуть <input type='text' /> совершенно не требуется display:block; правило.

rookie · July 4, 2011

А просто display:block/width:100% почему не катит?
да и для того что бы растянуть <input type='text' /> совершенно не требуется display:block; правило.

Не требуется-то оно не требуется но Вы же хотите, чтобы input вел себя как обычный div, а тогда без display: block не обойтись.

Кроме того, у input есть атрибут size, который по дефолту равен 80. Думаю, что это во многом объясняет тот факт, что просто задав ему display: block, input не становится как div.

klierik · July 4, 2011

Не требуется-то оно не требуется но Вы же хотите, чтобы input вел себя как обычный div, а тогда без display: block не обойтись.
Кроме того, у input есть атрибут size, который по дефолту равен 80. Думаю, что это во многом объясняет тот факт, что просто задав ему display: block, input не становится как div.

С сайзом и так понятно. А вот с или без display: block инпут все равно не будет тянутся по ширине строки, чего не скажешь про table-cell.

Странно это как-то.

rookie · July 4, 2011

С сайзом и так понятно. А вот с или без display: block инпут все равно не будет тянутся по ширине строки, чего не скажешь про table-cell.
Странно это как-то.

А как Вы решили задачу? input - table-cell, родитель - table?

mishka · July 4, 2011

Как по мне так дополнительный блок - это меньшее извращение чем display: table-cell

klierik · July 4, 2011

rookie,

Да, родителю поставил display: table. Пришлось из-за IE

mishka, Зато во всех браузерах, кроме chrome, работа элементов получилась ожидаемая. При чем очень даже гибкая и удобная. А вот теперь на флотах придется больше мучатся.

rookie · July 4, 2011

klierik, а в итоге Ваша миссия какая была? Добиться того чтобы input можно было задать float и его соседи снизу обтекали контентом или что?

klierik · July 4, 2011

конечная цель:

ширина, высота изменяемая

расположение иконок может быть как справа так и слева, причем может меняться на лету.

rookie · July 4, 2011

Просто шкурный интерес. А какая практическая польза от резиновых инпутов? Резиновая textarea - понятно например, а input?

Edited July 4, 2011 by rookie

klierik · July 4, 2011

в разных элементах интерфейса разные инпуты по ширине.

klierik · July 7, 2011

В общем решение пришлось все таки делать через дополнительный элемент-контейнер, ех

CSS:

Стили для <input type="text">


/* @group Text field */

	.b-text-field {
		font-size: 12px;
		font-family: inherit; /* because Firefox */

		display: inline-block;
		height: 23px;
		width: 200px;
		padding: 0 0 0 4px;

		line-height: 21px;

		-moz-box-sizing:    border-box;
		-webkit-box-sizing: border-box;
		box-sizing:         border-box;

		border: 1px solid #a5acb2;
		background: #fff; /* Old browsers */

		background: -moz-linear-gradient(top, #EAEAEA 0%, #FFFFFF 50%, #FFFFFF 100%); /* FF3.6+ */		
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EAEAEA), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* Opera11.10+ */

		background: -ms-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* IE10+ */
		/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EAEAEA', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */

		background: linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* W3C */
		}

	/* focus and hover view */
	.b-text-field:focus,
	.b-text-field:hover {
		border-color: #bcd8ea;
		}

	/*
	_default value
	*/
	.b-text-field_default_value {
		color: #999;
		}

/* @end */

/* @group RTL */

	.g-rtl .b-text-field {
		padding: 0 4px 0 0;
		}

/* @end */

/* @group Custom styles */

	.mac.chrome .b-text-field {
		line-height: 23px;
		}

/* @end */

Стили для всей конструкции


/* @group Text Field > _advanced */

	.b-text-field_advanced {
		font-style: normal; /* because of opera */

		height: 23px;
		width: 200px; /* default width */
		display: inline-block;

		line-height: 0;

		-moz-box-sizing:    border-box;
		-webkit-box-sizing: border-box;
		box-sizing:         border-box;

		border: 1px solid #a5acb2;
		outline: none;

		background: #fff; /* Old browsers */
		background: -moz-linear-gradient(top, #EAEAEA 0%, #FFFFFF 50%, #FFFFFF 100%); /* FF3.6+ */		
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EAEAEA), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* Opera11.10+ */

		background: -ms-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* IE10+ */
		/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EAEAEA', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */

		background: linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* W3C */
		}

	.b-text-field_advanced:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		}

		/* field */
		.i-text-field {
			font-style: normal;

			display: block;
			float: none;
			overflow: hidden;
			}
			.i-text-field > .b-text-field {
				width: 100%;
				height: 21px;

				border: 0;
				outline: none;
				}

			/* icons */
			.b-text-field_advanced > .b-text-field__icon {
				display: block;
				float: right;

				width: 18px;
				height: 100%;

				background-repeat: no-repeat;
				background-position: 50% 50%;

				cursor: pointer;
				}

	/*
	:hover and :focus
	*/
	.b-text-field_advanced:hover,
	.b-text-field_advanced:hover > .b-text-field__icon,
	.b-text-field_advanced_focus,
	.b-text-field_advanced_focus > .b-text-field__icon,
	.b-text-field_advanced_focus > .b-text-field__icon.dropdown {
		border-color: #bcd8ea;
		}

/* @end */

/* @group RTL */

	.g-rtl .b-text-field_advanced > .b-text-field__icon {
		float: left;
		}

/* @end */

HTML:

Обычный text-field

<input type="text" class="b-text-field" value="First name" />

Combo-box


    <i class="b-text-field_advanced b-text-field_combo">
        <i class="b-text-field__icon dropdown"></i>

        <i class="i-text-field">
            <i class="b-text-field b-text-field_clone"></i>
            <input type="text" class="b-text-field" value="Default Combo text" />
        </i>        
    </i>

извеняюсь за длинный код, но codebox не работает

psywalker · July 7, 2011

klierik, Лёх, а почему у родителя inline-block; не катит?

klierik · July 8, 2011

klierik, Лёх, а почему у родителя inline-block; не катит?

так он там и стоит как бэ

psywalker · July 8, 2011

klierik, Лёх, а почему у родителя inline-block; не катит?
так он там и стоит как бэ

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

klierik · July 8, 2011

в рамках поставленной задачи обойтись без него не представляет возможным.

psywalker · July 8, 2011

в рамках поставленной задачи обойтись без него не представляет возможным.

Ну и не надо. Наоборот это даже к лучшему

klierik · July 8, 2011

Для общей картины полный перечень возможностей этого элемента:

http://awesomescreenshot.com/0d6g8vy40

И всё это строится на базе обычного <input>

psywalker · July 8, 2011

Для общей картины полный перечень возможностей этого элемента:
http://awesomescreenshot.com/0d6g8vy40
И всё это строится на базе обычного <input>

Прикольно, и как раз инлайн-блок подходит.

klierik · July 8, 2011

очень даже подходит.

в рамках текущего проекта это свойство использовалось в многих местах и показало себя с наилучшей стороны, так как оно позволяет строить гибкие конструкции, которые ранее приходилось эмулировать множеством таблиц (от сюда вес страницы существенно(!) выростал)

Sign In

Text field + эмулировать работу свойств div`а

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information