1

Как сделать форму подписки такого плана?!

Форма

Как видно из фото, есть прозрачность. Может это готовый элемент? Тогда дайте ссылку на библиотеку, или же напишите как сделать такое самостоятельно?! Спасибо за помощь!

1 ответ 1

3

Закругления: border-radius: NNpx;

body {
  background: #ccc;
}

*{box-sizing: border-box; }

form{
  position: relative;
  max-width: 500px;
  width: 100%;
  height: 40px;
}

input[type="submit"] {
  background: #fff;
  border: none;
  height: 40px;
  width: 100px;
  text-align: center;
  border-radius: 20px;
  position: absolute;
  top:0;
  right: 0;
  cursor: pointer;
}

input[type="text"] {
  height: 40px;
  width: 100%;
  border: 1px solid #fff;
  background: rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 10px;
  padding-right: 100px;
  outline: none;
}

/* ---- Placeholder ---- */
::-webkit-input-placeholder {
   color: #000;
}
:-moz-placeholder { /* Firefox 18- */
   color: #000;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #000;  
}
:-ms-input-placeholder {  
   color: #000;  
} 
<form>
  <input type="text" placeholder="email adress">
  <input type="submit" value="sign up">
</form>

4
  • Там же граница белого 1px :)
    – Yuri
    5 мар 2017 в 13:21
  • Тип инпута можно указывать без самого слова input. Иначе вы повышаете специфичность селектора
    – user31906
    5 мар 2017 в 13:29
  • Принцип я понял, спасибо. Ещё 2 вопроса: placeholder не видно из-за прозрачности, чем заменить его?! И как сделать чтобы ввод текста начинался не от края инпута, а с небольшим отступом?
    – Денис
    5 мар 2017 в 13:44
  • @Денис, можно задать стили placeholder, а можно задать value у инпута. Отступы регулируйте - padding. А вообще почитайте о формах, их стилизации webref.ru/layout/html5-css3/form , webref.ru/course/html-content/forms
    – SVE
    5 мар 2017 в 14:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.