Despite having released a new version of CSS, CSS3 is not yet defined to change the appearance of some things and it does exist. There is the compatibility issue between some browsers.

The use of a library is a good alternative, but for a design where speed and better performance are required, it is not the best option, even more so when these libraries tend to load unnecessary css styles and to talk about the extensive js script, when wanting to add things. attractive still site and relying on libraries that would mean having to use a library for each new thing you want to add.

There are other alternatives such as a similar design in select optionorder to give a more attractive design to the default design.

What I want to achieve from this costume is that it has the same functions as a select optionnormal one... That is, that it hides when you click elsewhere, that if there are a large number of options, not everything is shown, that it shows a bar scrollbarsuch like a select optionnormal does.

https://jsfiddle.net/aht3nr4u/

For the disguise using other tags I have the following working:

$("body").on("click", ".selected", function() {
  $(this).next(".options").toggleClass("open");
});

$("body").on("click", ".option", function() {
  var value = $(this).find("span").html();
  $(".selected").html(value);
  $("#sel").val(value);
  $(".options").toggleClass("open");
});

.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

.selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

.selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

.options {
  display: none;
  margin: 0;
  padding: 0;
}

.options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li.search {
  padding: 0.5rem 0;
}

li>img {
  margin-right: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />


<form>
  <input type="hidden" id="sel">
  <div class="container">
    <div class="selected">Select an option</div>
    <ul class="options"  id="fbody">
      <input type="text" id="search">
      <li class="option"><span>Option 1</span></li>
      <li class="option"><span>Option 2</span></li>
      <li class="option"><span>Option 3</span></li>
      <li class="option"><span>Option 4</span></li>
      <li class="option"><span>Option 5</span></li>
      <li class="option"><span>Option 6</span></li>
      <li class="option"><span>Option 7</span></li>
      <li class="option"><span>Option 8</span></li>
      <li class="option"><span>Option 9</span></li>
      <li class="option"><span>Option 10</span></li>
      <li class="option"><span>Option 11</span></li>
      <li class="option"><span>Option 12</span></li>
      <li class="option"><span>Option 13</span></li>
      <li class="option"><span>Option 14</span></li>
      <li class="option"><span>Option 15</span></li>
      <li class="option"><span>Option 16</span></li>
      <li class="option"><span>Option 17</span></li>
      <li class="option"><span>Option 18</span></li>
      <li class="option"><span>Option 19</span></li>
      <li class="option"><span>Option 20</span></li>
      <li class="option"><span>Option 21</span></li>
      <li class="option"><span>Option 22</span></li>
      <li class="option"><span>Option 23</span></li>
      <li class="option"><span>Option 24</span></li>
      <li class="option"><span>Option 25</span></li>
      <li class="option"><span>Option 26</span></li>
      <li class="option"><span>Option 27</span></li>
      <li class="option"><span>Option 28</span></li>
      <li class="option"><span>Option 29</span></li>
      <li class="option"><span>Option 30</span></li>
      <li class="option"><span>Option 31</span></li>
      <li class="option"><span>Option 32</span></li>
      <li class="option"><span>A</span></li>
      <li class="option"><span>B</span></li>
      <li class="option"><span>C</span></li>
      <li class="option"><span>D</span></li>
      <li class="option"><span>E</span></li>
      <li class="option"><span>H</span></li>
      <li class="option"><span>E</span></li>
      <li class="option"><span>E</span></li>
      <li class="option"><span>A</span></li>
      <li class="option"><span>Other</span></li>
    </ul>
  </div>
</form>

Which meets the following conditions:

• When I click, it shows me the list of options.
• When selecting an option it is added in the same way as if it were a select optionand at the same time the same value is added in a inputhidden field.

My idea in the end is to achieve is to have the following design

The la bar scrollbarcould be edited by adding this jsfiddle demo style .

I have almost everything working, it would only be necessary to add those small details that can be achieved through CSS3 styles, but I have not been able to give it the best style :(

I have found these examples of css styles in codepen and in (jsfiddle)[ http://jsfiddle.net/Starx/a6NJk/2/]

But I haven't managed to do much despite the examples.

I tried resetting the password of an inactive user, who still hasn't verified his email, and when I send that form, it tells me to check the email to reset the password, but it shouldn't send the email because the user is inactive.

So how can I add another personalized message, if the user is not active, tell him, please activate your account, if you have trouble activating, resend the verification in the following form (a link).

if (empty($_POST['email'])) {
    $email_require = 'Por favor, ingrese su correo electrónico';
} else {
    if (preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/", $_POST['email'])) {
        $email = $_POST['email'];

        $active = 1;
        $stmt = $con->prepare("SELECT email, first_name, email_code FROM users WHERE email=? OR username=? AND active=?");
        $stmt->bind_param("ssi",$email,$username,$active);
        $stmt->execute();
        $stmt->store_result();
        //como los datos que pasas en los inputs concuerdan con la Base de datos te tare 1 fila con lo datos que pediste
        //es decir la condicion es verdadera
        if ($stmt->num_rows>0) {
          //aqui debes hacer el proceso de recuperacion 
            $stmt->bind_result($email_user, $first_name, $email_code);
            $stmt->fetch();

            echo '¡Por favor, revise su correo electrónico '.$email_user.' para obtener un enlace de confirmación para completar su restablecimiento de contraseña!';

            $to = $email_user;
            $subject = "Proceso para restablecer su contraseña";
            $message_body = 'Hola '.$first_name.',
            ¡Has solicitado restablecimiento de contraseña!

            Por favor, haga clic en este enlace para restablecer su contraseña.

            http://example.com/login-system/reset.php?email='.urlencode($email).'&key='.$email_code.'';
            mail($to, $subject, $message_body, 'From: [email protected]');
        } else {
          //como los campos que envio estan vacion, entonces la base de datos nunca retornara ninguna fila
          //y es aqui donde captura el error 
            echo "¡Usuario con ese correo electrónico no existe!";
        }
    } else {
        echo 'Tu dirección de correo electrónico no es válida';
    }
}
}

The problem with allowing password reset is that there is a serious security hole in it.

Because in my file reset.phpit is sending the same account activation code that was generated when the user registered.

For an attacker, it would be easy to make several attempts, for example in this way:

example.com/login-system/reset.php?email=ponercualquieremail%key=generarcódigoaleatorio

And if it matches the table records users, the attacker can change the password and gain access to the access system.

All that security hole due to the same activation code.

So, this link, to reset the password:

http://example.com/login-system/reset.php?email=example%40gmail.com&key=523db8c57a3d17d0860fa705c4c24ec62efc0c68f2f1443e39938361424099f1

It is the same to activate the account:

http://example.com/login-system/verify.php?email=example%40gmail.com&key=523db8c57a3d17d0860fa705c4c24ec62efc0c68f2f1443e39938361424099f1

What's more, I can save that code that I receive to activate the account, to reset the password without having to enter the email in the reset form password, simply by changing it verify.php?toreset.php?

Now I have the following structure of my tableusers

+----------+-----------+--------+----------+------------+--------+
| id_user  | username  | email  | password | email_code | active |
+----------+-----------+--------------------------------+--------+
|      1   | karla     | karla@ | $2y$10...| 23db8c5... |   1    |
+-------------+-------------+--------------+------------+---------

How can I correct this security problem, sending that activation code along with the user's id to another table and with an expiration time, and that when activating the account that record is deleted, and that when requesting to reset the password create a new verification code with expiration date and when resetting the password that record is deleted again.

My complete code.

register.php

session_start();
include "require.ini.php";

if (isset($_POST['formsubmitted'])) {
    $msg = array();

    if (empty($_POST['username'])) {
        $msg[] = 'Por favor, ingrese un nombre de usuario';
    } else {
        $username = $_POST['username'];
    }

    if (empty($_POST['email'])) {
        $msg[] = 'Por favor, ingrese su correo electrónico';
    } else {
        if (preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/", $_POST['email'])) {
            $email = $_POST['email'];
        } else {
            $msg[] = 'Tu dirección de correo electrónico no es válida';
        }
    }

    if (strlen($_POST['password']) <6){
        $msg[] = 'Su contraseña debe tener al menos 6 caracteres';
    }
    if ($_POST['password'] !== $_POST['password_again']){
        $msg[] = 'Su contraseña no coincide';
    } else {
        $password = $_POST['password'];
    }

    if (empty($_POST['firstname'])) {
        $msg[] = 'Por favor, ingrese su nombre';
    } else {
        $first_name = $_POST['firstname'];
    }

    if (empty($msg)) {
        $stmt = $con->prepare("SELECT * FROM users WHERE email=? OR username=?");
        $stmt->bind_param("ss",$email,$username);
        $stmt->execute();
        $stmt->store_result();

        if ($stmt->num_rows>0) {
            echo "¡El usuario con este correo electrónico ya existe!";
        } else {

            $hash_password = password_hash($password, CRYPT_BLOWFISH);
            $key = bin2hex(openssl_random_pseudo_bytes(32));
            //$key_two = bin2hex(random_bytes(32)); // Disponible apartir de PHP V.7
            $active_default = 0;
            $stmtA = $con->prepare("INSERT INTO users (username, email, password, first_name, email_code, active) VALUES (?, ?, ?, ?, ?, ?)");
            $stmtA->bind_param("sssssi", $username,$email,$hash_password,$first_name,$key,$active_default);

            if($stmtA->execute()){
                echo 'El enlace de confirmación ha sido enviado por correo electrónico. ¡Por favor, haga clic en el enlace del mensaje para activar su cuenta!';

                $to = $email;
                $subject = "Por favor, verifique su cuenta.";
                $message_body = 'Hola '.$first_name.',
                ¡Gracias por registrarte!

                Estas aún solo paso de ser parte de nuestra comunidad.

                Por favor, haga clic en este enlace para activar su cuenta:

                http://example.com/login-system/verify.php?email='.urlencode($email).'&key='.$key.'';
                mail($to, $subject, $message_body, 'From: [email protected]');
                //header("location: index.php");
                //exit;
            } else {
                echo "Ha ocurrido un error internamente, por favor, vuelva intertar enviar su solicitud más tarde";
            }
        }
    } else {
        foreach ($msg as $key => $values) {
            echo '  <div>'.$values.'</div>';
        }
    }
}

reset.php

<?php
session_start();
include "require.php";

if (isset($_GET['email']) && preg_match('/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/', $_GET['email'])) {
    $email = $_GET['email'];
}
if (isset($_GET['key']) && (strlen($_GET['key']) == 64)) {
    $key = $_GET['key'];
}

if (isset($email) && isset($key)) {
    //$email = $con->escape_string($_GET['email']);
    //$key = $con->escape_string($_GET['key']);
    $active_defaul = 1;

    $stmt = $con->prepare("SELECT * FROM users WHERE email=? AND email_code=? AND active=?");
    $stmt->bind_param("ssi",$email,$key,$active_defaul);
    $stmt->execute();
    $stmt->store_result();
    //if ($result->num_rows == 0 )
    if ($stmt->num_rows==0) {
    //if ($stmt->num_rows>0) {
        echo "¡Ingresó una URL inválida para restablecer la contraseña!";
    } else {
        echo '
        <!DOCTYPE html>
        <html>
        <head>
            <title></title>
        </head>
        <body>
            <form action="reset_password.php" method="post">
             <label>New Password</label>
                <input type="password" name="password" autocomplete="off"/>
            <label>Confirm New Password</label>
                <input type="password" name="password_again" autocomplete="off"/>
                <input type="hidden" name="email" value="'.$email.'">
                <input type="submit" name="form_reset" value="Guardar contraseña" />
            </form>
        </body>
        </html>';
    }

} else {
    echo "¡Acceso denegado!";
}
?>

reset_password.php

session_start();
include "require.php";

if (isset($_POST['form_reset'])) {
    $email = $_POST['email'];
    $password = $_POST['password'];

    $hash_password = password_hash($password, CRYPT_BLOWFISH);

    $stmt = $con->prepare("UPDATE users SET password= ? WHERE email=? OR username=?");
    $stmt->bind_param("sss", $hash_password,$email,$email);
    if($stmt->execute()){
        header("location: correcto.php");
    } else {
        header("location: error.php");
    }
}

With the help of srJJ I can now receive the password reset link in the mail.

http://example.com/login-system/reset.php?email=example%40gmail.com&key=523db8c57a3d17d0860fa705c4c24ec62efc0c68f2f1443e39938361424099f1

Despite the fact that the data is correct, it does not show me the form to enter the new password, showing me the following message.

¡Ingresó una URL inválida para restablecer la contraseña!

this is my filereset.php

<?php
session_start();
include "require.php";

if (isset($_GET['email']) && preg_match('/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/', $_GET['email'])) {
    $email = $_GET['email'];
}
if (isset($_GET['key']) && (strlen($_GET['key']) == 64)) {
    $key = $_GET['key'];
}

if (isset($email) && isset($key)) {
    //$email = $con->escape_string($_GET['email']);
    //$key = $con->escape_string($_GET['key']);
    $active_defaul = 1;

    $stmt = $con->prepare("SELECT * FROM users WHERE email=? AND email_code=? AND active=?");
    $stmt->bind_param("ssi",$email,$key,$active_defaul);
    $stmt->execute();
    $stmt->store_result();
    //if ($result->num_rows == 0 )
    if ($stmt->num_rows>0) {
        echo "¡Ingresó una URL inválida para restablecer la contraseña!";
    } else {
        echo '
        <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form action="reset_password.php" method="post">
     <label>New Password</label>
        <input type="password" name="password" autocomplete="off"/>
    <label>Confirm New Password</label>
        <input type="password" name="password_again" autocomplete="off"/>
        <input type="hidden" name="email" value="'.$email.'">
        <input type="submit" name="form_reset" value="Guardar contraseña" />
    </form>
</body>
</html>';
    }

} else {
    echo "¡Acceso denegado!";
}
?>

And this would be my file where the password will be sent although it would be better to do it all in the same filereset.php

my filereset_password.php

session_start();
include "require.php";

if (isset($_POST['form_reset'])) {
    $email = $_POST['email'];
    $password = $_POST['password'];

    $hash_password = password_hash($password, CRYPT_BLOWFISH);

    $stmt = $con->prepare("UPDATE users SET password= ? WHERE email=? OR username=?");
    $stmt->bind_param("sss", $hash_password,$email,$email);
    if($stmt->execute()){
        header("location: correcto.php")
    } else {
        header("location: error.php");
    }

}

I cannot check if there are errors reset_password.phpbecause the file is not validating me reset.php, I am working individually on the files once I see that if everything works, I will implement it with AJAXand then through jQuery or javascript I will avoid sending requests to the server with invalid data in the formula.

When submitting the data, it always shows me the following custom error message:

An error has occurred internally, please try to submit your request again later

I have no more details to attach, it does not show me any other error.

<?php
//session_start();
include "app/php/require.ini.php";

if (isset($_POST['formsubmitted'])) {
    $msg = array();

    if (empty($_POST['username'])) {
        $msg[] = 'Por favor, ingrese un nombre de usuario';
    } else {
        $username = $_POST['username'];
    }

    if (empty($_POST['email'])) {
        $msg[] = 'Por favor, ingrese su correo electrónico';
    } else {
        if (preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/", $_POST['email'])) {
            $email = $_POST['email'];
        } else {
            $msg[] = 'Tu dirección de correo electrónico no es válida';
        }
    }

    if (strlen($_POST['password']) <6){
        $msg[] = 'Su contraseña debe tener al menos 6 caracteres';
    }
    if ($_POST['password'] !== $_POST['password_again']){
        $msg[] = 'Su contraseña no coincide';
    } else {
        $password = $_POST['password'];
    }

    if (empty($_POST['firstname'])) {
        $msg[] = 'Por favor, ingrese su nombre';
    } else {
        $first_name = $_POST['firstname'];
    }

    if (empty($msg)) {
        $stmt = $con->prepare("SELECT * FROM users WHERE email=? OR username=?");
        $stmt->bind_param("ss",$email,$username);
        $stmt->execute();
        $stmt->store_result();

        if ($stmt->num_rows>0) {
            echo "¡El usuario con este correo electrónico ya existe!";
        } else {

            $hash_password = password_hash($password, CRYPT_BLOWFISH);
            $key = bin2hex(openssl_random_pseudo_bytes(32));
            //$key_two = bin2hex(random_bytes(32)); // Disponible apartir de PHP V.7
            //$active_default = 0;
            $stmtA = $con->prepare("INSERT INTO users (username, email, password, first_name, email_code) VALUES (?, ?, ?, ?, ?)");
            $stmtA->bind_param("sssss", $username,$email,$hash_password,$first_name,$key);

            if($stmtA->execute()){
                echo 'El enlace de confirmación ha sido enviado por correo electrónico. ¡Por favor, haga clic en el enlace del mensaje para activar su cuenta!';

                $to = $email;
                $subject = "Por favor, verifique su cuenta.";
                $message_body = 'Hola '.$first_name.',
                ¡Gracias por registrarte!

                Estas aún solo paso de ser parte de nuestra comunidad.

                Por favor, haga clic en este enlace para activar su cuenta:

                http://localhost/login-system/verify.php?email='.urlencode($email).'&key='.$key.'';
                mail($to, $subject, $message_body, 'From: [email protected]');
                header("location: index.php");
                exit;
            } else {
                echo "Ha ocurrido un error internamente, por favor, vuelva intertar enviar su solicitud más tarde";
            }
        }
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<form action="register.php" method="post">
    <input type="text" id="username" name="username" placeholder="Usuario" value="<?php echo isset($username) ? $username: ""; ?>" >
    <input type="text" id="email" name="email" placeholder="Email" value="<?php echo isset($email) ? $email: ""; ?>" >
    <input type="password" id="password" name="password" placeholder="Password">
    <input type="password" id="password_again" name="password_again" placeholder="Password again">
    <input type="text" id="firstname" name="firstname" placeholder="Nombre" value="<?php echo isset($first_name) ? $first_name: ""; ?>" >
    <input type="submit" name="formsubmitted" value="Register" />
</form>
</body>
</html>

Update

The custom error message is no longer displayed by making the following changes, replacing: if (empty($error)) {}byif (empty($msg)) {}

But now, when submitting the blank form data, that is, without filling in the fields input, it does not show me any error message.