it-swarm.com.de

Verwenden Sie CSS, um das erforderliche Feld (Stern) automatisch zum Eingeben von Eingaben hinzuzufügen

Was ist ein guter Weg, um die unglückliche Tatsache zu überwinden, dass dieser Code nicht wie gewünscht funktioniert:

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

In einer perfekten Welt würden alle erforderlichen inputs das kleine Sternchen erhalten, um anzuzeigen, dass das Feld erforderlich ist. Diese Lösung ist nicht möglich, da das CSS nach dem Elementinhalt eingefügt wird, nicht nach dem Element selbst, sondern in etwa so, als wäre es ideal. Auf einer Site mit Tausenden von erforderlichen Feldern kann ich den Stern vor der Eingabe mit einer Änderung in eine Zeile verschieben (:after in :before) oder ich kann ihn an das Ende des Etiketts (.required label:after) oder vor das Etikett verschieben , oder zu einer Position auf der umschließenden Box usw. 

Dies ist nicht nur für den Fall wichtig, dass ich meine Meinung ändere, wo das Sternchen überall platziert werden soll, sondern auch für seltene Fälle, in denen das Formularlayout das Sternchen in der Standardposition nicht zulässt. Es funktioniert auch gut mit der Validierung, die das Formular überprüft oder nicht ordnungsgemäß ausgefüllte Steuerelemente hervorhebt.

Schließlich wird kein zusätzliches Markup hinzugefügt.

Gibt es gute Lösungen, die alle oder die meisten Vorteile des unmöglichen Codes haben?

92
brentonstrine

Obwohl dies die akzeptierte Antwort ist, ignorieren Sie bitte und verwenden Sie die unten vorgeschlagene :after-Syntax. Meine Lösung ist nicht zugänglich.


Ein ähnliches Ergebnis könnte erzielt werden, indem ein Hintergrundbild eines Bildes eines Sterns verwendet wird und der Hintergrund der Beschriftung/Eingabe/des äußeren div und eine Auffüllung der Größe des Sternchenbildes festgelegt wird.

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

Dadurch wird das Sternchen INSIDE in das Textfeld eingefügt. Wenn Sie jedoch dasselbe auf div.required anstelle von .required input setzen, ist dies wahrscheinlich mehr, was Sie suchen, wenn auch etwas weniger elegant.

Diese Methode erfordert keine zusätzliche Eingabe .

34
jaypeagi

Hast du das im Sinn?

http://jsfiddle.net/erqrN/1/

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required:after { content:" *"; }
</style>

siehe https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements

164
Max Girkens
.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

Geige mit deiner genauen Struktur: http://jsfiddle.net/bQ859/

61
laffuste

Um es genau INTO-Eingabe zu setzen, wie auf dem folgenden Bild dargestellt: 

enter image description here

Ich habe folgenden Ansatz gefunden: 

.asterisk_input:after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }


 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form> 

Die Website, auf der ich arbeite, ist mit einem festen Layout codiert, sodass es für mich in Ordnung war.

Ich bin mir nicht sicher, ob es für flüssiges Design gut ist.

21
Tebe

in CSS schreiben

.form-group.required .control-label:after {content:"*";color:red;}

und HTML

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>
12
Kondal
input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

Das Bild hat auf der rechten Seite etwas 20px Platz, um sich nicht mit dem Auswahlpfeil zu überschneiden

enter image description here

Und es sieht so aus: enter image description here

10
Toolkit
input[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}
7
faisal

Verwenden Sie jQuery und CSS

jQuery(document).ready(function() {
 jQuery("[required]").after("<span class='required'>*</span>");
});
.required {
    position: absolute;
    margin-left: -10px;
    color: #FB0000;
    font-size: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>

4
Falah

.asterisc {
  display: block;
  color: red;
  margin: -19px 185px;
}
<input style="width:200px">
<span class="asterisc">*</span>

2

Ich denke, das ist der effizienteste Weg, warum so viel Kopfschmerzen

    <div class="full-row">
     <label for="email-id">Email Address<span style="color:red">*</span></label>
  <input type="email" id="email-id" name="email-id"  ng-model="user.email" >
    </div> 
2
user2903536

Es ist 2019 und frühere Antworten auf dieses Problem werden nicht verwendet

  1. CSS-Raster
  2. CSS-Variablen
  3. HTML5-Formularelemente
  4. SVG in CSS

CSS-Raster ist der Weg, um Formulare im Jahr 2019 zu erstellen, da Ihre Beschriftungen Ihren Eingaben vorangestellt werden können, ohne dass zusätzliche Divs, Spannweiten, Spannweiten mit Sternchen in und andere Relikte vorhanden sind.

Hier geht es mit minimalem CSS:

Example screenshot

Das HTML für das oben:

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

Platzhaltertext kann ebenfalls hinzugefügt werden und wird dringend empfohlen. (Ich beantworte gerade diese Mittelform).

Nun zu den CSS-Variablen:

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

Das CSS für die Formularelemente:

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

Das Formular selbst sollte sich im CSS-Raster befinden:

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

Die Werte für die Spalten können auf 1fr auto oder 1fr festgelegt werden, z. B. mit <p>-Tags im Format auf 1/-1. Sie ändern die Variablen in Ihren Medienabfragen, sodass die Eingabefelder auf Mobilgeräten und auf dem Desktop wie oben beschrieben angezeigt werden. Sie können Ihre Netzlücke auch auf mobilen Geräten ändern, wenn Sie den CSS-Variablen-Ansatz verwenden.

Wenn die Felder gültig sind, sollten Sie anstelle des Sterns ein grünes Häkchen setzen.

Das SVG in CSS ist eine Möglichkeit, den Browser vor einem Hin- und Rückweg zum Server zu schützen, um ein Bild des Sterns zu erhalten. Auf diese Weise können Sie die Sternchen fein abstimmen. Die Beispiele hier sind in einem ungewöhnlichen Winkel. Sie können dies herausbearbeiten, da das SVG-Symbol oben vollständig lesbar ist. Die Viewbox kann auch geändert werden, um das Sternchen über oder unter der Mitte zu platzieren.

0
Henry's Cat