Tengo problemas para alinear mi casilla de verificación junto a mi texto.

Estoy desarrollando una aplicación de lista simple de hacer. He creado el elemento de párrafo con JavaScript y he creado la casilla de verificación con un elemento span.

El listElement id en mi CSS deriva del JavaScript, donde configuro el ID del elemento de párrafo en listElement

Esto es lo que busco:

enter image description here

Esto es lo que tengo hasta ahora:

enter image description here

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>
0
Adeel Hussain 10 sep. 2018 a las 17:55

4 respuestas

La mejor respuesta

Okay. Toca este fragmento, creo que te gustará.

preview of snippet

Me basé en esta idea:

  • la casilla de verificación real permanece invisible

  • hay otra casilla de verificación visible, estilizada (la marca es en realidad un ángulo girado), que cambia su estilo de acuerdo con el estado de la casilla de verificación real

Además:

  • No estabas creando la casilla de verificación con javascript, solo la etiqueta
  • Cambié su javascript: ahora forma el html apropiado y lo inyecta con Método insertAdarestHTML ()
  • También agregué el efecto cruzado cuando no estaba marcado
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>
2
Damián Pablo González 10 sep. 2018 a las 16:45

Puedes usar checkbox hack para esto

.check {
  width: 30px;
  height: 30px;
  background-color: red;
  display: inline-block;
}
.text {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  vertical-align: top;
  padding: 0 5px;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked + label {
  background-color: black;
}
input[type="checkbox"]:checked ~ .text {
  background-color: #0f0;
  color: white;
  text-decoration: line-through;
}
<input type="checkbox" id="a" />
<label class="check" for="a"></label><div class="text">Get shit done</div>
0
Chris Li 10 sep. 2018 a las 15:24

Comience con este marcado mínimo y CSS, y luego agregue sus propios estilos.

.item {
    align-items: center;
    display: flex;
}

/* Sample custom styles. */
.item p {
    background: red;
    color: white;
    font-size: 20px;
}
<div>
    <div class="item">
        <input type="checkbox">
        <p>Item 1</p>
    </div>
    <div class="item">
        <input type="checkbox">
        <p>Item 2</p>
    </div>
</div>

Estos siempre estarán alineados entre sí, independientemente de sus estilos personalizados.

0
rmn 10 sep. 2018 a las 16:37
.input-container {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

Usar CSS es mucho más fácil de alinear elementos en su página. Consulte el tutorial de W3Schools: es simple y fácil de explicar https://www.w3schools.com/howto /howto_css_form_icon.asp

0
Omid Nikrah 10 sep. 2018 a las 15:18