如何为文件上传创建+符号圈

Question

我需要在注册表单上使用文件上传圈。文件输入可以自定义，无需在后台显示图像。请帮忙。

＆＃13;

＆＃13;

label.filebutton {
  height: 40px;
  overflow: hidden;
  position: relative;
  background-color: #ccc;
}

＆＃13;

<form class="loginForm" id="register-form-keepar">
  <div class="loginForm-login step" data-step="1" style="display: none;">
    Step 1 :
    <br>
    <div class="form-group">
      <input type="text" id="mobile_number" data-toggle="tooltip" data-placement="top" title="" name="mobile_no" class="form-control" placeholder="Mobile No" data-original-title="" style="">
    </div>
    <div class="form-group">
      <button class="btn btn-default  btn-gold step-controle" data-go="back">Back</button>
      <button type="submit" class="btn btn-default  btn-gold step-controle" data-go="next">Next</button>
    </div>
  </div>
  <div class="loginForm-login step" data-step="2" style="display: none;">
    Step 2 :
    <br>
    <div class="form-group">
      <input type="text" name="otp" id="otp" class="form-control" placeholder="OTP" data-original-title="">
    </div>
    <div class="form-group">
      <input type="password" name="password" id="password" class="form-control" placeholder="New Password" data-original-title="">
    </div>
    <div class="form-group">
      <input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Confirm Password" data-original-title="">
    </div>
    <div class="form-group">
      <button class="btn btn-default  btn-gold step-controle" data-go="back">Back</button>
      <button type="submit" class="btn btn-default  btn-gold step-controle" data-go="next">Next</button>
      <a class="resend-OTP inline-block resend-otp-element">Resend OTP</a>

    </div>
  </div>
  <input type="hidden" id="come_from_cart_flag" name="cart" value="false">
  <div class="loginForm-login step active" data-step="3" style="">
    Step 3 :
    <br>
    <div class="form-group">
      <label class="filebutton">
    Browse For File!
    <span><input type="file" id="myfile" name="myfile"></span>
    </label>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" name="name" id="name" placeholder="Name">
    </div>
    <div class="form-group">
      <input class="form-control" name="address_line_1" id="add1" placeholder="Address Line 1">
    </div>
    <div class="form-group">
      <input class="form-control" name="address_line_2" id="add2" placeholder="Address Line 2">
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <input class="form-control" placeholder="City" type="text" name="city" id="city">
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <input class="form-control" placeholder="State" type="text" name="state" id="state">
        </div>

      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <input class="form-control" placeholder="Country" type="text" id="country" name="country">
        </div>
      </div>
    </div>
    <div class="row">

      <div class="col-md-12">
        <div class="form-group">
          <input type="text" class="form-control" id="phone_no" name="phone_no" placeholder="Phone No">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <input type="text" class="form-control" id="email_id" name="email_id" placeholder="Email Id">
        </div>
      </div>
    </div>

    <div class="form-group">
      <!-- <button type="submit" class="btn btn-default  btn-gold step-controle" data-go="back">Back</button> -->
      <button type="submit" class="btn btn-default  btn-gold step-controle" data-go="next">Update</button>
    </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的问题不是那么清楚，也许你正试图解决这个问题。

＆＃13;

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Roboto');
form{
  margin: 50px;
  font-family: 'Roboto', sans-serif;
}
input{
  display: none;
}
label{
  cursor: pointer;
  padding: 28px 10px;
  color: #fff;
  background: #00f;
  border-radius: 50%;
}

＆＃13;

<form>
  <label>Add file
  <input type="file" />
</form>

＆＃13;

＆＃13;

＆＃13;