css圆形和背景颜色

Question

任何人都可以帮我实现这个目标吗？

我需要那个复选框和带有圆角的字段和带有该颜色的背景

感谢

Answer 1

这有用吗

＆＃13;

＆＃13;

.panel-default * {
  background: #25A9DF !important;
  color: #fff !important;
}
::-webkit-input-placeholder {
  color: #fff!important;
}
:-moz-placeholder {
  color: #fff;
  opacity: 1!important;
}
::-moz-placeholder {
  color: #fff;
  opacity: 1!important;
}
:-ms-input-placeholder {
  color: #fff!important;
}
.login-form .form-control {
  padding: 0 12px;
  height: auto;
  font-size: 14px;
  line-height: 3.428571;
}
.login-form .form-control,
.login-form .input-group-addon {
  border: 1px solid #fff;
}
.login-form .form-control {
  border-left: none;
}
.login-form .input-group-addon {
  border-right: none;
}
.btn {
  padding: 12px 12px!important;
  border: 1px solid #fff!important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="panel panel-default">
        <div class="panel-body">

          <form class="form-inline login-form">

            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i>
                </div>
                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Username or Email">
              </div>

              <div class="input-group">
                <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i>
                </div>
                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Password">
              </div>
            </div>

          </form>
          <div class="form-group text-right">
            <a href="">Forgot Password?</a>
          </div>

          <div class="form-group">
            <div class="btn btn-block btn-info">Login</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要使用border-radius来弯曲角落。如果您不确定使用此工具（http://border-radius.com/）来帮助您实现它。

我会通过使2个输入字段使用border-radius来弯曲第一个输入的顶角和第二个输入的底角来解决这个问题。然后根据需要设计其余样式。