Hinzufügen roten Stern Pflichtfelder

Ich will hinzufügen, ein rotes Sternchen für meine benötigten Felder aus. Bisher habe ich versucht mit diesem:

CSS:

.required-field::before {
  content: "*";
  color: red;
  float: right;
}

HTML:

<form id="nonUsSafety" method="post">
  <div class="divTable">
    <div class="divTableBody">
      <div class="divTableRow">
        <div class="divTableCell required-field">Status:</div>
        <div class="divTableCell"><input type="text" id="statusNonUs" value="${statusNonUs}"></div>
      </div>
      <div class="divTableRow">
        <div class="divTableCell required-field">Issued By:</div>
        <div class="divTableCell"><input type="text" id="issuedBy" value="${issuedBy}"></div>
      </div>
    </div>
  </div>
</form>

Aber das problem ist, es hält setzen Sie das Sternchen zu weit rechts. Ich will, dass es rechts neben dem text "Status:" und "Ausgestellt Von:". Ich habe versucht, das entfernen Sie das float-Attribut, aber es legt dann das rote Sternchen vor den text.

Hier ist ein jsfiddle, die zeigt, dass alles, einschließlich css-Stile.

InformationsquelleAutor Alec | 2017-08-07
  1. 7

    Eher als ::before verwenden ::after und entfernen Sie die float: right.

    ::before Orte ein pseudoelement, bevor das element, die Sie ausgewählt haben. ::after wird, platzieren Sie es nach, also anstatt das Sternchen vor das element, das Sie möchten und verschieben Sie es mit einem Schwimmer - /position können Sie einfach platzieren Sie es nach natürlich.

    Den Grund, das Sternchen war bewegt zu weit rechts ist, weil schwimmende bewegt sich das element auf der rechten Seite des übergeordneten Containers (nicht immer das übergeordnete element, lassen Sie mich wissen, wenn Sie möchten mir zu aufwendig). So von schwimmenden Recht, Sie sagten es, sich zu bewegen auf der rechten Seite der label-container, was bedeutet, dass nur auf der linken Seite der Textfelder, und nicht auf der rechten Seite der label-text.

    https://jsfiddle.net/h4depmdf/1/

    .required-field::after {
    content: "*";
    color: red;
}
    InformationsquelleAutor Don
  2. 1

    Hey Ihr schweben das Sternchen zu Recht

    stattdessen

    .required-field::after {
  content: "*";
  color: red;
  margin-left:2px
}

    Sind Sie mit pseudo ::before-Selektor die Platzierung der Inhalte vor dem element. Verwenden pseudo ::nach um es zu platzieren, nach dem element.

    InformationsquelleAutor Orlando P.
  3. -2

    CSS:

    .required-field::before {
  content: "*";
  color: red;
}

    HTML:

    <html>

<form id="nonUsSafety" method="post">
  <div class="divTable">
    <div class="divTableBody">
      <div class="divTableRow">
        <div class="divTableCell">Status:<span class="required-field"><span></div>
            <div class="divTableCell"><input type="text" id="statusNonUs" value="${statusNonUs}"></div>
          </div>
          <div class="divTableRow">
            <div class="divTableCell">Issued By:<span class="required-field"><span></div>
            <div class="divTableCell"><input type="text" id="issuedBy" value="${issuedBy}"></div>
          </div>
        </div>
      </div>
    </form>
</html>

    • Posting-code allein nicht für eine gute Antwort. Fügen Sie einige Wörter, die erklären, was Sie geändert haben und warum.
    InformationsquelleAutor Anil
Schreibe einen Kommentar