0
200
Vistas¿Por qué mi botón Cerrar de CSS tiene dos caracteres X?
Actualmente estoy haciendo un rastreador de gastos, donde cuando alguien ingresa sus gastos, aparece en un div de historial. Estoy un poco confundido sobre cómo abordar esto.
Aquí hay una salida de ejemplo:
Sin embargo, si miras de cerca, el botón aparece dos veces. Estoy confundido en cuanto a cómo resolver este problema. Obtuve el código CSS para el botón de StackOverflow pero lo cambié un poco.
Gracias.
function showHistory() { var count = values.length; document.getElementById('history').innerHTML = ""; for (var i = 0; i < count; i++) { //class="btn-close btn-close-white" var st1 = "<div class='row' id='r1'><div class='col-md-7 border'>" + values[i].text + "<div class='row' id='r1'><div class='col-md-7'>" + values[i].brand + "</div>" + "<div class='col-md-3'>" + values[i].amnt + "</div>" + "<div class='col-md-1'><button class='close-icon' onclick='deleteam(\"" + values[i].id + "\")'>×</button></div></div>"; var st2 = "<div class='row border' id='r2'><div class='col-md-7'>" + values[i].text + "<div class='row' id='r2'><div class='col-md-7'>" + values[i].brand + "</div>" + "<div class='col-md-3'>" + values[i].amnt + "</div>" + "<div class='col-md-1'><button class='close-icon' onclick='deleteam(\"" + values[i].id + "\")'>×</button></div></div>"; (parseFloat(values[i].amnt) < 0) ? document.getElementById('history').innerHTML += st2: document.getElementById('history').innerHTML += st1; } } .close-icon { display: block; box-sizing: border-box; width: 20px; height: 20px; border-width: 3px; border-style: solid; border-color: rgb(57, 100, 199); border-radius: 100%; background: -webkit-linear-gradient( -45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100% ), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%); background-color: rgb(57, 100, 199); transition: all 0.3s ease; } <div class="container" id="history"></div>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Es porque tiene CSS para generar la X pero también tiene × unicode por lo tanto tendrá 2 X , simplemente elimine × desde el button interior
Nota: también puede eliminar los prefijos de proveedores para degradados lineales
·
Juan Pablo Isaza
Denunciar
Responde la pregunta