Как добавить фон ко всей форме?

Question

[Dvorak]

codepen.io/anon/pen/OMBbeM

Как сделать так, чтобы фон был и вокруг полей ввода? Как в твиттере вокруг формы входа, грубо говоря

Answer 1

[Григорий]

Это?

#input_form input {
 background: transparent;
 border:none;
 max-width:100%
}

Comments

[Dvorak]

нет, вы не так поняли. Необходимо, чтобы поля не выезжали за фон. Извините, что так коряво описал всё

[Григорий]

Михаил Макарычев: ну тогда max-width:100% только. Поля не будут выезжать за блок.

[Dvorak]

Григорий: а если надо оставить ту же длину поля ввода, то никак? Не хотелось бы уменьшать их

[Антон Середний]

Тю, а в чем проблема то? Делаете ДИВ с фоном нужным, а поверх него уже форма с полями. В твиттере так же?

[Григорий]

Михаил Макарычев: Тогда не надо ограничивать ширину блока с фоном. В примере он ограничен.

Answer 2

[Антон Нагаец]

Код на jsfiddle

.first-form {
  display:block;
  width:200px;
  margin:100px auto;
  padding:10px;
  background-color:white;
  border:3px solid #fff;
  border-radius:10px;
}
.first-form input{
  margin: 10px;
  height: 22px;
  border:1px solid #249FEB;
  border-radius:5px;
  box-shadow: 0 0 10px rgba(35,155,230,0.7);
  padding-left:10px;
  color:#999;
}
.first-form button{
  display:block;
  width:120px;
  margin:10px auto;
  background-color:#239AE3;
  border:1px solid #249FEB;
  border-radius:5px;
  color:white;
}

<div class='first-form' >
  <form id='input_form' action='register' name='input_name_form' method='post'>
    <input name='name_input' type='text' placeholder='login'><br/>
    <input name='mail_input' type='text' placeholder='mail'><br/>
    <input name='pass_input' type='password' placeholder='password'><br/>
    <button>
    Sign up for Titanium
    </button>
  </form>