Как сделать input ссылкой?

"input ссылка" - Как сделать input ссылкой? Возьмем определенный инпут и сделаем из него ссылку + живой пример!

Подробно - "Как сделать input ссылкой"

1. Пример превращения input в ссылку

Пример превращения input в ссылку

Смотри еще больше о ссылках на других элементах


Итак... для превращения input-а в ссылку нам понадобится input:

<input name="text" type="text" value="input в ссылку">

Выведем данный инпут прямо здесь:

Добавим инпуту класс class="link" + hover

<style>
input[type="text"].link:hover {
border-bottom: 1px solid #ff000000;
cursor: pointer; padding-bottom: 2px;
}
input[type="text"].link {
border: unset;
background: unset;
border-bottom: 1px solid #969696;
outline: unset;
padding: unset;
margin: unset;
text-align: center;
padding-bottom: 2px;
}
</style

Смотрим результат - как видим input(type="text") в ссылку превращается тяжело... поскольку ширина его будет по умолчанию... определенной постоянной ширины, если вы не задали эту ширину через css.

А растягиваться по содержимому с помощью css невозможно, поэтому нам понадобится {javascript}:

<input class="link" type="text" size="10" maxlength="50" onkeydown="size=value.length||10" onkeyup="onkeydown()" onkeypress="onkeydown()" onchange="onkeydown()" value="input в ссылку">

Это максимум, что мы можем сделать с input(type="text") :

Пример инпута ссылкой:

Для создания из инпута(type="text") ссылки лучше подходит другой тип инпута.

Рекомендую ознакомится...

Всего комментариев : 0Comments+ 2.0

1000

+ =

Отправить