Как вставлять входы в другой вход

У меня есть два input s, сначала type="text", а второй type="submit". Я пытаюсь показать кнопку один внутри сначала input.Как вставлять входы в другой вход

.inputs { 
 
    width: 245px; 
 
    padding: 15px 25px; 
 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    font-weight: 400; 
 
    font-size: 14px; 
 
    color: #9D9E9E; 
 
    text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0); 
 
    background: #FFF; 
 
    border: 1px solid #FFF; 
 
    border-radius: 5px; 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50); 
 
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50); 
 
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50); 
 
}

<form> 
 
    <input type="email" class="inputs" placeholder="Enter your e-mail" name="email" required="required" /> 
 
    <input type="submit" value="subscribe" id="subbutton" /> 
 
</form>

Это то, что я хочу создать enter image description here

источник

2015-01-24 Dragut

Ты случайно с помощью начальной загрузки? –

Что значит, вы хотите показать кнопку внутри текста? Я не понимаю. –

Если вы используете bootstrap, это очень просто. см. http://jsfiddle.net/bvbfd1kv/1/ Это то, что вы пытаетесь достичь? –

Вы можете достичь этого, расположив значок и кнопку absolute и предоставив им соответствующие стили.

enter image description here

form { 
 
    display: inline-block; 
 
    padding: 0; 
 
    margin: 0; 
 
    position: relative; 
 
} 
 
.inputs { 
 
    width: 245px; 
 
    padding: 15px 82px 15px 50px; 
 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    font-weight: 400; 
 
    font-size: 14px; 
 
    color: #9D9E9E; 
 
    text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0); 
 
    background: #FFF; 
 
    border: 1px solid #FFF; 
 
    border-radius: 5px; 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50); 
 
} 
 
#subbutton { 
 
    position: absolute; 
 
    background:#EEE; 
 
    border:none; 
 
    font-size:1em; 
 
    color: #3C3B39; 
 
    right: 0; 
 
    bottom: 2px; 
 
    width: auto; 
 
    font-size: 13px; 
 
    height: calc(100% - 4px); 
 
    box-sizing: border-box; 
 
    border-top-right-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
    cursor: pointer; 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50); 
 
} 
 
#subbutton:hover { 
 
    background: #C4C4C4; 
 
} 
 
input:focus { 
 
    outline: 0; 
 
} 
 
#subbutton::-moz-focus-inner { 
 
    border: 0; 
 
} 
 
#envelope { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 100%; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    font-size: 40px; 
 
    background: url(http://3.bp.blogspot.com/-LjFGCzX54lw/VMP2MYfNh2I/AAAAAAAAAF4/5lfFXmCwIjk/s1600/Screenshot_1.png) no-repeat; 
 
    background-position: 5px 10px; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
<form> 
 
    <div id="envelope"></div> 
 
    <input type="email" class="inputs" placeholder="Enter your e-mail" name="email" required="required" /> 
 
    <input type="submit" value="Subscribe" id="subbutton" /> 
 
</form>

источник

2015-01-24 19:59:42

Как уместился заполнитель? : O – user3790069

@ пользователь3790069 - 'padding'? –

У меня вопрос, вызывает ли вызов bootstrap в моем файле CSS, что приведет к поздней загрузке моих страниц? – Dragut

.inputs { 
 
    width: 245px; 
 
    padding: 15px 25px; 
 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    font-weight: 400; 
 
    font-size: 14px; 
 
    color: #9D9E9E; 
 
    text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0); 
 
    background: #FFF; 
 
    border: 1px solid grey; 
 
    border-radius: 5px 0 0 5px; 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50); 
 
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50); 
 
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50); 
 
    
 
    /* background */ 
 
    background-image: url(http://3.bp.blogspot.com/-LjFGCzX54lw/VMP2MYfNh2I/AAAAAAAAAF4/5lfFXmCwIjk/s1600/Screenshot_1.png); 
 
    background-repeat: no-repeat; 
 
    background-position: right 
 
} 
 

 
input[type=submit] { 
 
    border-radius: 0 5px 5px 0; 
 
    background: white; 
 
    border: solid 1px grey; 
 
    padding: 14px 25px; 
 
    border-left: none 
 
}

<form> 
 
    <input type="email" class="inputs" placeholder="Enter your e-mail" name="email" required="required" /><!-- 
 
    --><input type="submit" value="subscribe" id="subbutton" /> 
 
</form>

источник

2015-01-24 19:51:37 user3790069

очень круто, спасибо вам большое, и я думаю, что я смогу остальным по своему усмотрению, потому что хочу упорядочить электронную почту на левой стороне. – Dragut

#input{ 
 
    width:260px; 
 
    border:1px solid #ccc; 
 
    overflow:auto; 
 
    height:50px; 
 
    border-radius:5px; 
 
} 
 

 
input.input{ 
 
    float:left; 
 
    margin:0px 5px 0px 0px; 
 
} 
 

 
input#inp1{ 
 
    border:0px; 
 
    width:150px; 
 
    padding:15px 0px 15px 2px; 
 
    font-size:1em; 
 
} 
 

 
input#inp2{ 
 
    border:0px; 
 
    border-right:1px solid #ccc; 
 
    width:50px; 
 
    font-size:1em; 
 
    color:#667; 
 
    background:#fff; 
 
    padding:16px 0px 16px 0px; 
 
} 
 

 
img.input{ 
 
    
 
    padding:6px 0px 0px 0px; 
 
    
 
}

<form> 
 
<div id="input"> 
 
    <input id="inp2" class="input" type="submit" name="" value="GO!"> 
 
    
 
    <input id="inp1" class="input" type="email" name="" value="" placeholder="Enter Email Here" required="required"> 
 
    
 
    <img class="input" src="http://3.bp.blogspot.com/-LjFGCzX54lw/VMP2MYfNh2I/AAAAAAAAAF4/5lfFXmCwIjk/s1600/Screenshot_1.png" width="46px"> 
 
     
 
</div> 
 
</form>

источник

2015-01-24 19:51:48

Благодарю вас, господин Гарза, пожалуйста, см. Мой фальшивый превью в сообщении – Dragut

Я попытался получить его как раз в порядке .... мне удалось или нужно больше? –

Как вставлять входы в другой вход

ответ

Смежные вопросы