Как вставить кнопку в текстовое поле (изображение прилагается)

Question

Как вставить кнопку в текстовое поле (изображение прилагается)

0

В моей форме у меня есть отключенное текстовое поле, значение которого - число, например, цена. Поэтому я хотел бы добавить кнопку отправки внутри или над этим полем, чтобы сделать что-то вроде этого изображения:

      <input name="" type="text" maxlength="50" value="£0.00" id="" disabled>
      <button value="submit">Submit</button>

Kamran Jafari 03 окт. 2013, в 03:13

Источник

0

Вы пробовали что-то вроде этого stackoverflow.com/questions/15314407/… ?
sushain97 03 окт. 2013, в 00:24
0

Спасибо за ваш пост, очень полезно
Kamran Jafari 03 окт. 2013, в 16:14

Теги:

html

html5

forms

button

textfield

3 ответа

0

Не понимаю, чего вы хотите достичь. Если вы хотите, чтобы текстовое поле было скрыто (поэтому кнопка отправки заменяет место текстового поля), вы должны использовать type = "hidden" вместо отключенного. вы можете поместить оба элемента в div, если хотите просто отобразить их рядом друг с другом и установить (в css) ширину и float: left. И если вы настаиваете на том, чтобы поместить кнопку над текстовым полем, вы можете поместить положение кнопки в абсолютную (в пределах содержащего div).

Bastiaan Andriessen 02 окт. 2013, в 22:51

0

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

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

Чтобы получить элементы рядом друг с другом, вы можете использовать различные методы css, такие как display: inline-block; , который размещает элементы inline (рядом друг с другом, на одной и той же "линии"), сохраняя при этом свойства элемента блока. Или, если вы хотите обернуть контейнер вокруг элементов, вы можете использовать float для размещения элементов или display: table-cell; внутри display: table; контейнер. (Есть и больше способов, чем это, если вы хотите изучить его еще!)

Что касается стиля, в частности, в вашем примере изображения, этот эффект может быть достигнут за счет использования радиуса границы только на внешних углах каждого элемента, оставляя внутренние квадраты и заподлицо друг с другом, а затем граничит с внешними краями, чтобы сделать они выглядят как единое целое. Опять же, если у вас есть элемент контейнера, вы можете создать его для создания эффектов на внешних краях, а затем индивидуально вписать и вход и кнопку.

Blake Mann 02 окт. 2013, в 21:41

Ещё вопросы

Вы пробовали что-то вроде этого stackoverflow.com/questions/15314407/… ?
Спасибо за ваш пост, очень полезно

Shalom Aptekar · Accepted Answer · 2013-10-02T22-09-00.000Z

Вам в основном просто нужно ограничить радиус ввода и контейнера, чтобы он выглядел правильно. Ключевыми стилями являются:

div.radius {
    width:100px;
    border-radius:10px;
    background:gainsboro;
    overflow:hidden;

}
div.radius input[type='text']{
    display:inline-block;
    float:left;
    width:70%;
    box-shadow:inset 0px 3px 5px 0px rgba(25,25,25,0.3);
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border:0;
    margin:0
}

Посмотрите демонстрацию, чтобы увидеть небольшой пример реализации. Вы можете вырезать код с помощью некоторой модуляции элементов, а также для нормализации. Дайте мне знать, если что-нибудь еще:

DEMO

http://jsfiddle.net/B6N5Q/1/

РЕДАКТИРОВАТЬ

обновленный jsfiddle с отключенным текстом.