我在对齐文本旁边的复选框时遇到问题。
我正在开发一个简单的待办事项列表应用程序。我已经使用创建了段落元素,JavaScript
并使用span
元素创建了复选框。
将listElement
id
在我的CSS
导出从JavaScript
,在那里我段落元素ID设置为listElement
这是我的目标:
这是我到目前为止所拥有的:
var toDoItems = [];
var i = 1;
var userInput;
var listElement;
var checkBox;
document.getElementById("addItem").onclick = function() {
userInput = prompt("Enter your Todo: ")
toDoItems.push(userInput);
stylePara();
document.getElementById("item-list").
append(listElement);
}
function stylePara() {
listElement = document.createElement("p");
listElement.id = "listElement";
listElement.innerHTML = userInput;
}
#listElement {
width: 500px;
background: red;
margin: 0 auto;
border: 1px solid green;
color: white;
text-align: center;
text-transform: capitalize;
padding: 20px;
}
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<h1>My Tasks</h1>
<h4><span id="number1"></span> tasks</h4>
<button id="addItem">Add item</button>
<div id="item-list">
<span><input type="checkbox" id="checkbox"></span>
</div>
好的。播放这个片段,我想你会喜欢的。
我基于这个想法:
真正的复选框仍然不可见
还有另一个可见的复选框,风格化(检查实际上是一个旋转的角度),它根据真实复选框的状态改变其样式
还:
var toDoItems = [];
var i = 1;
var userInput;
var listElement;
var checkBox;
document.getElementById("addItem").onclick = function() {
userInput = prompt("Enter your Todo: ")
toDoItems.push(userInput);
document.getElementById("item-list").insertAdjacentHTML('beforeend', stylePara());
}
function stylePara() {
var html = '';
html += '<label class="container">';
html += '<input type="checkbox">';
html += '<span class="checkmark"></span>';
html += '<span class="checklabel">' + userInput + '</span>';
html += '</label>';
return html;
}
/* The container */
.container {
width: 100%;
margin-left: 40%;
/*this is the general left margin*/
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: -5px;
left: 0;
height: 35px;
width: 35px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a green background */
.container input:checked~.checkmark {
background-color: darkgreen;
}
/* label when unchecked */
.checklabel {
background: red;
color: white;
padding: 5px 20px;
}
/* label when checked */
.container input:checked~.checklabel {
text-decoration: line-through;
background: green;
color: white;
padding: 5px 20px;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
display: block;
top: 10px;
left: 15px
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<h1>To do list</h1>
<button id="addItem">Add item</button>
<div id="item-list">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
<span class="checklabel">Example item</span>
</label>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句