问答详情
源自：3-4 表单控件(输入框input)

这个区别 由于什么造成的？有 class="form-control"的区别？

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>表单控件——输入框input</title>

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<form role="form">

  <div>

    <input type="email"  class="form-control" placeholder="Enter email">

    <input type="text"  class="form-control" placeholder="userName">

 <input type="text"  placeholder="userName">

  </div>

</form>   

</body>

</html>


提问者：墨涤 2015-03-26 20:15

个回答

  • shangmingchao
    2015-11-09 09:57:22

    .form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

    你可以看一下CSS样式就明白了，form-control宽100%，4px的圆角，还有其它样式

    2