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

313
07 марта 2017, 13:57

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

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

Answer 1

Закругления: 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>

READ ALSO
Как сверстать блок?

Как сверстать блок?

Есть такой блок

340
Перенаправление пользователя с сохранением данных текущего запроса

Перенаправление пользователя с сохранением данных текущего запроса

Как сделать перенаправление пользователя при ответе сервлета с сохранением данных текущего запроса?

376
Cкрипт формы фидбэка

Cкрипт формы фидбэка

Здравствуйте, господаНужна Ваша помощь

343
Шрифты на резиновом шаблоне

Шрифты на резиновом шаблоне

Добрый вечерВерстаю резиновый шаблон и возникли неожиданные трудности с шрифтами

332