Question

我能够为它创建代码，但复选框不会出现在图像上方。它有点流离失所，我该怎么解决？

＆＃13;

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  border: 2px solid #7e8a94;
  float: right;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked + span:before {
  content: "✔";
}

＆＃13;

 <label class="custom-checkbox">
    
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
  <input type="checkbox">
  <span></span>
</label>

＆＃13;

我希望复选框显示在左上角，这样：http://prntscr.com/j960yk

感谢您的时间。

Answer 1

在您的float: left; CSS规则中添加了.custom-checkbox span，添加了br代码，并对您的HTML进行了一些修改。

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  border: 2px solid #7e8a94;
  /* float: right; - you don't need that. Use float: left; */
  float: left;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked+span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked+span:before {
  content: "✔";
}

<label class="custom-checkbox">
 <input type="checkbox">
  <span></span>   
  <br>
  <br>
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
</label>

Answer 2

 <label class="custom-checkbox">

 <img class="img" src="https://placeimg.com/640/480/any" width="300"/>
  <input type="checkbox">
  <span></span>
</label>

$(document).ready(function() {
 $('img').click(function() {
 $(this).find('checkbox').checked(true);
 })
});

工作小提琴https://jsfiddle.net/y88zLp2r/

Answer 3

只需将输入放在图像之前，然后移除右浮动样式。

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  border: 2px solid #7e8a94;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked + span:before {
  content: "✔";
}

<label class="custom-checkbox">
 <input type="checkbox"/> 
  <span></span>
  <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
</label>

Answer 4

再添加一些css

.custom-checkbox{
   position: relative;
   display: inline-block;
   padding-top: 30px;
 }
 .custom-checkbox span{
   position: absolute;
   top: 0;
   left: 0;
 }

这将有效

Answer 5

＆＃13;

.custom-checkbox input {
  display: none;
}
.custom-checkbox{
   display: inline-block;
   position: relative;
   padding-top: 30px;
 }

.custom-checkbox span {
  border: 2px solid #7e8a94;
  float: right;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked + span:before {
  content: "✔";
}

＆＃13;

 <label class="custom-checkbox">
    
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
  <input type="checkbox">
  <span></span>
</label>

＆＃13;

Answer 6

Sub test()

    Application.DisplayAlerts = False
    Application.ScreenUpdating = False

    Dim wbSource As Workbook, wbTarget As Workbook
    Dim wsToCopy As Worksheet

    Set wbSource = ThisWorkbook

    For Each mySheet In wbSource.Sheets
        Set wbTarget = Workbooks.Add
        mySheet.Copy Before:=wbTarget.Sheets(1)
        wbTarget.Password = "XXX"
        wbTarget.Close True, mySheet.Name
    Next mySheet

    Application.DisplayAlerts = True
    Application.ScreenUpdating = True

End Sub

像这样更改HTML

 .custom-checkbox span {
     border: 2px solid #7e8a94;
     height: 20px;
     width: 20px;
     border-radius: 5px;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
}

Answer 7

通过在标签中添加for属性，并为其分配与复选框的name属性相同的值，该标签将作为复选框的可点击扩展名。

这样，您可以将标签放在布局中的任何位置。像这样：

<label for="image-checkbox" class="custom-checkbox">
    <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
</label>
<input type="checkbox" name="image-checkbox">

Answer 8

＆＃13;

$(document).on('ready',function(){
$("#avatar").on('click',function(){
$("#chkbox").trigger( "click" )

})

})

＆＃13;

    .container {
      position: relative;
      width: 50%;
    }

    .image {
      display: block;
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #0000;
    }

    .container:hover .overlay {
      opacity: 1;
    }
    

    .text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }

＆＃13;

<div class="container">
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar"  class="image">
      <div id="avatar" class="overlay">
        <div class="text"><input id="chkbox" type="checkbox"></div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何在单击图像时勾选复选框

8 个答案: