Tenemos un problema en nuestra página. Usamos un complemento para elegir una fecha de inicio, pero este complemento no muestra el icono del calendario para elegir la fecha. Todo funciona excepto el icono del calendario para mostrarle al cliente que puede hacer clic. Ahora tratamos de insertar un icono en la segunda fila del cuadro flexible.
.wscsd_calendar_dates_field::after { content: "\f073"; }Pero con esto, agrega una nueva fila al flexbox y muestra el icono. Pero queremos tenerlo en el segundo porque el usuario puede hacer clic allí para abrir el selector de fecha.
Esta es la estructura HTML que tenemos...
<div class="wscsd_date_picker"> <label for="wscsd_date_picker_display">Abo Start:</label> <div class="wscsd_date_picker"> <input type="date" class="short wscsd_calendar_dates_field" style="" id="wscsd_start_date" name="wscsd_start_date" min="2022-02-06" value="2022-02-06" placeholder="2022-02-06"> </div> </div>¿Cómo podemos hacer esto?
.wscsd_calendar_dates_field::after { content: "\f073"; font-family: "Font Awesome 5 Free"; font-weight: 900; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" /> </head> <body> <div class="wscsd_date_picker"> <label for="wscsd_date_picker_display">Abo Start:</label> <div class="wscsd_date_picker"> <input type="date" class="short wscsd_calendar_dates_field" style="" id="wscsd_start_date" name="wscsd_start_date" min="2022-02-06" value="2022-02-06" placeholder="2022-02-06" /> </div> </div> </body> </html>