Unten ist ein Versuch, den ich erstellt habe, um die CSS-Eigenschaft content zu verwenden, um das Häkchen für gültige Felder zu setzen, aber es war nicht erfolgreich.Anzeigen ✓ Gültige Eingabefelder unter Verwendung von Pseudo-Elementen

Da ich es auf diese Weise nicht wirklich gesehen habe, ist es einfach nicht möglich, es so zu machen? Wäre es effizienter, einfach JavaScript zu verwenden?

Ich möchte gerne über die Meinung der Leute erfahren, wie ich diese Funktion für Benutzerfeedback implementieren soll.

input[type=text]:valid { 
 
    border: 1px solid green; 
 
} 
 
input[type=text]:valid:after { 
 
    content: '✓'; 
 
    color: green; 
 
}

<p>Username:</p> 
 
<input type="text" placeholder="Username" name="username" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" title="Must Include Characters And Numbers only" required>

Dies beantwortet im Wesentlichen meine Frage: http://codepen.io/brentrobbins/pen/beexQR

Quelle

2016-07-31 User5916261

Siehe Demo [hier] (http://stackoverflow.com/a/38681057/747579) dann sagen Sie mir –

@Xufox: IT .. nicht dupliziert wird, weil er sich bewerben wollen: nach für ** GÜLTIGER ** Eingang, kein INPUT. –

gibt es Optionen wie diese ohne JavaScript zu verwenden http://codepen.io/brentrobbins/pen/beexQR das ist besser –

input nicht ::before oder ::after Elemente haben kann. Versuchen Sie, einen <span> um den Eingang zu wickeln und tun Sie die span:after

Oder verwenden Sie einfach ein img Element nach, wie dies auch funktioniert.

DEMO:

habe ich auch jQuery#valid CSS-Klasse des span zu ändern.

$('[name=username]').keyup(function(){ 
 

 
    if($('form').valid()){ 
 
     $(this).parent().removeClass().addClass('isvalid'); 
 
    }else{ 
 
      $(this).parent().removeClass().addClass('notvalid'); 
 
     
 
    } 
 

 
})

span.isvalid:after 
 
{ 
 
    content: '✓'; 
 
    color: green; 
 
    } 
 
span.notvalid:after{ 
 
    content: '×'; 
 
    color: red; 
 
    
 
} 
 

 
.isvalid input[name=username]{ 
 
\t border: 2px solid green; 
 
} 
 
.notvalid input[name=username]{ 
 
\t border: 2px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script> 
 

 
<p>Username:</p> 
 
<form> 
 
<span class="notvalid"><input type="text" placeholder="Username" name="username" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" title="Must Include Characters And Numbers only" required></span> 
 
    </form>

Quelle

2016-07-31 05:30:56

Anzeigen ✓ Gültige Eingabefelder unter Verwendung von Pseudo-Elementen

Antwort

DEMO:

Verwandte Themen