blogben/assets/styles/forms.css

/* Style global du formulaire */
form {
    max-width: 850px;
    margin: 50px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
  }
  
  /* Style pour les labels */
  form label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
  }
  
  /* Style pour les champs de saisie */
  form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form textarea,
  form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out;
  }
  
  /* Style pour les erreurs (si Symfony utilise des classes pour les erreurs) */
  form .is-invalid {
    border-color: #e74c3c;
  }
  
  form .is-invalid + .invalid-feedback {
    color: #e74c3c;
    font-size: 0.875rem;
  }
  
  /* Focus pour améliorer l'expérience utilisateur */
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form input[type="password"]:focus,
  form textarea:focus,
  form select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
  }
  
  /* Style pour les textarea */
  form textarea {
    min-height: 150px;
    resize: vertical; /* Permet de redimensionner verticalement seulement */
  }
  
  /* Style pour les boutons */
  form button[type="submit"],
  form input[type="submit"] {
    display: inline-block;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
  }
  
  form button[type="submit"]:hover,
  form input[type="submit"]:hover {
    background-color: #0056b3;
  }
  
  /* Style pour les cases à cocher et les boutons radio */
  form input[type="checkbox"],
  form input[type="radio"] {
    margin-right: 10px;
  }
  
  /* Wrapper pour les cases à cocher et radio */
  .form-check {
    margin-bottom: 20px;
  }
  
  .form-check-label {
    display: inline-block;
    color: #333;
  }
  
  /* Style pour les messages d'erreur (champ obligatoire, etc.) */
  .invalid-feedback {
    color: #e74c3c;
    margin-top: -15px;
    margin-bottom: 10px;
    font-size: 0.875rem;
  }
  
  /* Message de succès */
  form .success-message {
    color: #28a745;
    font-size: 1rem;
    margin-bottom: 20px;
    display: none;
  }
  
  /* Style pour les selects */
  form select {
    appearance: none;
    background: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="none" stroke="%23333" stroke-width=".5" d="M2 0L0 2h4z"/></svg>') no-repeat right 10px center;
    background-size: 12px;
  }