Platzhalter für Eingabetyp = Feld "Datum" wird nicht angezeigt

Ich mache eine Phonegap-App. Wenn ich ein type="date"Eingabefeld wie unten gezeigt versuche , wird die Datumsauswahl im iPhone wie erwartet angezeigt, aber der von mir angegebene Platzhalter wird nicht angezeigt. Ich habe das gleiche Problem hier in SO gefunden, aber nirgendwo eine Lösung.

 <input placeholder="Date" class="textbox-n" type="date" id="date">

Es mag nicht angemessen sein ... aber es hat mir geholfen.

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">

Wenn Sie die Methode von mvp verwenden, aber das Ereignis onblur hinzufügen, um es wieder in ein Textfeld zu ändern, wird der Platzhaltertext erneut angezeigt, wenn das Eingabefeld den Fokus verliert. Es macht den Hack nur ein bisschen schöner.

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" />

Hoffe das hilft.

Am Ende habe ich Folgendes verwendet.

In Bezug auf Firefox-Kommentare : Im Allgemeinen zeigt Firefox keinen Textplatzhalter für das Datum des Eingabetyps an. Da es sich jedoch um eine Cordova / PhoneGap-Frage handelt, sollte dies keine Rolle spielen (es sei denn, Sie möchten gegen FirefoxOS entwickeln).

input[type="date"]:not(.has-value):before{
  color: lightgray;
  content: attr(placeholder);
}

<input type="date" placeholder="MY PLACEHOLDER" onchange="this.className=(this.value!=''?'has-value':'')">

Ich habe dies in meinem CSS verwendet:

input[type="date"]:before{
    color:lightgray;
    content:attr(placeholder);
}

input[type="date"].full:before {
    color:black;
    content:""!important;
}

und so etwas in Javascript einfügen:

$("#myel").on("input",function(){
    if($(this).val().length>0){
    $(this).addClass("full");
}
else{
   $(this).removeClass("full");
   }
 });

es funktioniert für mich für mobile Geräte (Ios8 und Android). Aber ich habe jquery inputmask für den Desktop mit Eingabetexttyp verwendet. Diese Lösung ist eine gute Möglichkeit, wenn Ihr Code auf ie8 ausgeführt wird.

Ab heute (2016) habe ich diese 2 Snippets erfolgreich verwendet (und sie funktionieren hervorragend mit Bootstrap4).

Geben Sie links Daten ein, links Platzhalter

input[type=date] {
  text-align: right;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}

Platzhalter verschwinden beim Klicken

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}
input[type="date"]:focus:before {
  content: '' !important;
}

Nach dem HTML-Standard :

Die folgenden Inhaltsattribute müssen nicht angegeben werden und gelten nicht für das Element: akzeptieren, alt, überprüft, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, Höhe, Input Mode, maxlength, minlength, mehrfach, Muster, Platzhalter , Größe, src und width.

Für mich geht das:

input[type='date']:after {
  content: attr(placeholder)
}

Ich habe diese weiße jQuery verwendet: http://jsfiddle.net/daviderussoabram/65w1qhLz/

$('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() {
    var el = this, type = $(el).attr('type');
    if ($(el).val() == '') $(el).attr('type', 'text');
    $(el).focus(function() {
        $(el).attr('type', type);
        el.click();
    });
    $(el).blur(function() {
        if ($(el).val() == '') $(el).attr('type', 'text');
    });
});

Basierend auf den Antworten von deadproxor und Alessio würde ich versuchen, nur CSS zu verwenden:

input[type="date"]::before{
    color: #999;
    content: attr(placeholder) ": ";
}
input[type="date"]:focus::before {
    content: "" !important;
}

Und wenn Sie den Platzhalter unsichtbar machen müssen, nachdem Sie etwas in die Eingabe geschrieben haben, können Sie versuchen, die Selektoren: valid und: invalid zu verwenden, wenn Ihre Eingabe erforderlich ist.

BEARBEITEN

Hier ist der Code, den Sie für Ihre Eingabe benötigen:

input[type="date"]::before {
	color: #999999;
	content: attr(placeholder);
}
input[type="date"] {
	color: #ffffff;
}
input[type="date"]:focus,
input[type="date"]:valid {
	color: #666666;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before {
	content: "" !important;
}

<input type="date" placeholder="Date" required>

Wir haben einen besseren Weg gefunden, um Ihr Problem zu lösen. Ich denke, das wird dir helfen. Wenn das Feld fokussiert ist, ändert es den Typ in Text, sodass Ihr Platzhalter angezeigt wird. Bei Fokussierung ändert sich der Typ in Datum, sodass die Kalenderansicht angezeigt wird.

<input placeholder="Date" class="textbox-n" type="text" onfocusin="(this.type='date')" onfocusout="(this.type='text')"  id="date"> 

Ich habe die Idee von jbarlow übernommen, aber in der Funktion onblur ein if hinzugefügt, damit die Felder ihren Typ nur ändern, wenn der Wert leer ist

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.value == '' ? this.type='text' : this.type='date')" id="date">

Beheben des Problems in der aktuell richtigen Antwort "Durch Klicken auf das Feld wird die Bildschirmtastatur anstelle des Datumsauswahlelements angezeigt":

Das Problem wird dadurch verursacht, dass sich der Browser beim Klicken (= Text) entsprechend der Art der Eingabe verhält. Daher ist es notwendig, sich nicht mehr auf das Eingabeelement (Unschärfe) zu konzentrieren und dann den Fokus programmgesteuert auf das Eingabeelement neu zu starten, das im ersten Schritt von JS als Typ = Datum definiert wurde. Die Tastatur wird im Telefonnummernmodus angezeigt.

<input placeholder="Date" type="text" onfocus="this.type='date';
                      this.setAttribute('onfocus','');this.blur();this.focus();">

versuche meine Lösung. Ich benutze das Attribut 'erforderlich', um zu erfahren, ob die Eingabe gefüllt ist, und wenn nicht, zeige ich den Text vom Attribut 'Platzhalter' an.

//HTML
<input required placeholder="Date" class="textbox-n" type="date" id="date">

//CSS
input[type="date"]:not(:valid):before {
   content: attr(placeholder);
   // style it like it real placeholder
}

Ich habe eine Weile gebraucht, um das herauszufinden, lass es wie type="text"und füge es hinzu onfocus="(this.type='date')", genau wie oben gezeigt.

Ich mag sogar die oben erwähnte onBlur-Idee

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">

Hoffe, das hilft allen, die nicht ganz verstanden haben, was oben los ist

Um das Problem mit den Datumseingaben zusammenzufassen:

• Sie müssen sie anzeigen (dh Anzeige vermeiden: keine), sonst wird die Eingabe-Benutzeroberfläche nicht ausgelöst.
• Ein Platzhalter steht im Widerspruch zu ihnen (gemäß der Spezifikation und weil sie eine bestimmte Benutzeroberfläche anzeigen müssen).
• Das Konvertieren in einen anderen Eingabetyp für die nicht fokussierte Zeit ermöglicht Platzhalter, aber der Fokus löst dann zumindest für kurze Zeit die falsche Eingabe-Benutzeroberfläche (Tastatur) aus, da Fokusereignisse nicht abgebrochen werden können.
• Das Einfügen (vor) oder Hinzufügen (nach) von Inhalten verhindert nicht, dass der Datumseingabewert angezeigt wird.

Die Lösung, die ich gefunden habe, um diese Anforderungen zu erfüllen, besteht darin, native Formularelemente mit dem üblichen Trick zu formatieren: Stellen Sie sicher, dass das Element angezeigt, aber nicht sichtbar ist, und zeigen Sie den erwarteten Stil über die zugehörige Bezeichnung an . In der Regel wird die Beschriftung als Eingabe (einschließlich eines Platzhalters) angezeigt, jedoch darüber.

Also ein HTML wie:

<div class="date-input>
  <input id="myInput" type="date"> 
  <label for="myInput"> 
    <span class="place-holder">Enter a date</span> 
  </label>
</div>

Könnte wie folgt gestaltet werden:

.date-input {
  display: inline-block;
  position: relative;
}
/* Fields overriding */
input[type=date] + label {
  position: absolute;  /* Same origin as the input, to display over it */
  background: white;   /* Opaque background to hide the input behind */
  left: 0;             /* Start at same x coordinate */
}

/* Common input styling */
input[type=date], label {  
  /* Must share same size to display properly (focus, etc.) */
  width: 15em;
  height: 1em;
  font-size: 1em;
}

Jedes Ereignis (Klicken, Fokussieren) auf eine solche zugehörige Beschriftung wird im Feld selbst angezeigt und löst so die Benutzeroberfläche für die Datumseingabe aus.

Wenn Sie eine solche Lösung live testen möchten, können Sie diese Angular-Version von Ihrem Tablet oder Handy aus ausführen .

Also, was ich beschlossen habe, ist hier und es funktioniert gut auf allen mobilen Browsern, einschließlich iPhones und Androids.

$(document).ready(function(){

  $('input[type="date"]').each(function(e) {
    var $el = $(this), 
        $this_placeholder = $(this).closest('label').find('.custom-placeholder');
    $el.on('change',function(){
      if($el.val()){
        $this_placeholder.text('');
      }else {
        $this_placeholder.text($el.attr('placeholder'));
      }
    });
  });
  
});

label {
  position: relative;  
}
.custom-placeholder {
    #font > .proxima-nova-light(26px,40px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    color: #999;
}

<label>
  <input type="date" placeholder="Date">
  <span class="custom-placeholder">Date</span>
</label>

Datum

Ich arbeite mit ionicframework und die von @Mumthezir bereitgestellte Lösung ist fast perfekt. Für den Fall, dass jemand das gleiche Problem wie ich hätte (nach der Änderung ist die Eingabe immer noch fokussiert und beim Scrollen verschwindet der Wert einfach). Also habe ich onchange hinzugefügt, um input.blur () zu erstellen.

<input placeholder="Date" class="textbox-n" type="text" onfocus=" (this.type='date')" onchange="this.blur();"  id="date"> 

Sie können

1. Legen Sie es als Typentext fest
2. auf Fokus auf Datum konvertieren
3. Klicken Sie darauf
4. ... Benutzer das Datum überprüfen lassen
5. Speichern Sie bei Änderung den Wert
6. Stellen Sie die Eingabe so ein, dass Text eingegeben wird
7. Setzen Sie den Eingabewert für den Texttyp auf den gespeicherten Wert

so was...

$("#dateplaceholder").change(function(evt) {
  var date = new Date($("#dateplaceholder").val());
  $("#dateplaceholder").attr("type", "text");
  $("#dateplaceholder").val(date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
});
$("#dateplaceholder").focus(function(evt) {
  $("#dateplaceholder").attr("type", "date");
  setTimeout('$("#dateplaceholder").click();', 500);
});
$("#dateplaceholder").attr("type", "text");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="date" id="dateplaceholder" placeholder="Set the date" />

Mit Mouseover und Öffnen des Datepickers beim Klicken einen besseren Weg gefunden, um mit dem grundlegenden Verständnis des Benutzers umzugehen:

<input type="text" onfocus="(this.type='date')" onmouseover="(this.type = 'date')" onblur="(this.value ? this.type = 'date' : this.type = 'text')" id="date_start" placeholder="Date">

Verstecken Sie auch den Webkit-Pfeil und machen Sie ihn 100% breit, um den Klick abzudecken:

input[type="date"] {
    position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  right: 0;
  top:0;
  bottom: 0;
}

Aus Angular-Sicht habe ich es geschafft, einen Platzhalter in das Datumselement des Eingabetyps einzufügen.

Zunächst habe ich folgendes CSS definiert:

.placeholder {
    color: $text-grey;
  }

  input[type='date']::before {
    content: attr(placeholder);
  }

  input::-webkit-input-placeholder {
    color: $text-grey;
  }

Der Grund, warum dies notwendig ist, ist, dass ich, wenn CSS3-Inhalte eine andere Farbe haben als der normale Platzhalter, einen gemeinsamen verwenden musste.

<input #birthDate
         class="birthDate placeholder"
         type="date"
         formControlName="birthDate"
         placeholder="{{getBirthDatePlaceholder() | translate}}"
         [class.error]="!onboardingForm.controls.birthDate.valid && onboardingForm.controls.birthDate.dirty"
         autocomplete="off"
         >

Anschließend wurde in der Vorlage ein viewchild-Geburtsdatum-Attribut verwendet, um über die Komponente auf diese Eingabe zugreifen zu können. Und einen Winkelausdruck für das Platzhalterattribut definiert, der entscheidet, ob der Platzhalter angezeigt wird oder nicht. Dies ist der Hauptnachteil der Lösung, da Sie die Sichtbarkeit des Platzhalters verwalten müssen.

@ViewChild('birthDate') birthDate;

getBirthDatePlaceholder() {
  if (!this.birthDate) {
    return;
  } else {
    return this.birthDate.nativeElement.value === '' ?
    'ONBOARDING_FORM_COMPONENT.HINT_BIRTH_DATE' :
    '';
  }
}

<input placeholder="Date" type="text" onMouseOver="(this.type='date')" onMouseOut="(this.type='text')"  id="date" class="form-control">

Überarbeiteter Code von mumthezir

Ich bin überrascht, dass es nur eine Antwort gibt, deren Ansatz dem von mir verwendeten ähnelt.
Ich habe mich von @ Dtipsons Kommentar zur Antwort von @Mumthezir VP inspirieren lassen.

Ich benutze dafür zwei Eingaben, eine ist eine gefälschte Eingabe, mit type="text"der ich den Platzhalter setze, die andere ist das reale Feld mit type="date".
Bei dem mouseenterEreignis in ihrem Container verstecke ich die gefälschte Eingabe und zeige die echte, und bei dem mouseleaveEreignis mache ich das Gegenteil . Offensichtlich lasse ich die reale Eingabe sichtbar, wenn ein Wert darauf eingestellt ist.
Ich habe den Code geschrieben, um reines Javascript zu verwenden, aber wenn Sie jQuery verwenden (das tue ich), ist es sehr einfach, ihn zu "konvertieren".

// "isMobile" function taken from this reply:
// https://stackoverflow.com/a/20293441/3514976
function isMobile() {
  try { document.createEvent("TouchEvent"); return true; }
  catch(e) { return false; }
}

var deviceIsMobile = isMobile();

function mouseEnterListener(event) {
  var realDate = this.querySelector('.real-date');
  // if it has a value it's already visible.
  if(!realDate.value) {
    this.querySelector('.fake-date').style.display = 'none';
    realDate.style.display = 'block';
  }
}

function mouseLeaveListener(event) {
  var realDate = this.querySelector('.real-date');
  // hide it if it doesn't have focus (except
  // on mobile devices) and has no value.
  if((deviceIsMobile || document.activeElement !== realDate) && !realDate.value) {
    realDate.style.display = 'none';
    this.querySelector('.fake-date').style.display = 'block';
  }
}

function fakeFieldActionListener(event) {
  event.preventDefault();
  this.parentElement.dispatchEvent(new Event('mouseenter'));
  var realDate = this.parentElement.querySelector('.real-date');
  // to open the datepicker on mobile devices
  // I need to focus and then click on the field.
  realDate.focus();
  realDate.click();
}

var containers = document.getElementsByClassName('date-container');
for(var i = 0; i < containers.length; ++i) {
  var container = containers[i];
  
  container.addEventListener('mouseenter', mouseEnterListener);
  container.addEventListener('mouseleave', mouseLeaveListener);
  
  var fakeDate = container.querySelector('.fake-date');
  // for mobile devices, clicking (tapping)
  // on the fake input must show the real one.
  fakeDate.addEventListener('click', fakeFieldActionListener);
  // let's also listen to the "focus" event
  // in case it's selected using a keyboard.
  fakeDate.addEventListener('focus', fakeFieldActionListener);
  
  var realDate = container.querySelector('.real-date');
  // trigger the "mouseleave" event on the
  // container when the value changes.
  realDate.addEventListener('change', function() {
    container.dispatchEvent(new Event('mouseleave'));
  });
  // also trigger the "mouseleave" event on
  // the container when the input loses focus.
  realDate.addEventListener('blur', function() {
    container.dispatchEvent(new Event('mouseleave'));
  });
}

.real-date {
  display: none;
}

/* a simple example of css to make 
them look like it's the same element */
.real-date, 
.fake-date {
  width: 200px;
  height: 20px;
  padding: 0px;
}

<div class="date-container">
  <input type="text" class="fake-date" placeholder="Insert date">
  <input type="date" class="real-date">
</div>

Ich habe dies auch auf einem Android-Handy getestet und es funktioniert, wenn der Benutzer auf das Feld tippt, wird der Datepicker angezeigt. Die einzige Sache ist, wenn die reale Eingabe keinen Wert hatte und der Benutzer die Datumsauswahl schließt, ohne ein Datum auszuwählen, bleibt die Eingabe sichtbar, bis sie außerhalb tippen. Es gibt kein Ereignis zum Anhören, um zu erfahren, wann der Datepicker geschlossen wird, daher weiß ich nicht, wie ich das lösen soll.

Ich habe kein iOS-Gerät, auf dem ich es testen kann.

Hier ist der Ansatz, um die Lösung von @ mvp mit Blick auf unauffälliges Javascript zu erweitern:

HTML:

<input type="text" placeholder="Date" class="js-text-date-toggle">

Javascript:

$('.js-text-date-toggle').on('focus', function() {
  $(this).attr('type', 'date') }
).on('blur', function() {
  $(this).attr('type'), 'text') }
)

Ich denke, alles, was Sie tun müssen, ist, das Modell so zu ändern, dass das Datumsfeld nullwertfähig ist, und dann [Erforderlich] darauf zu setzen, wenn es erforderlich ist. In diesem Fall wird der Platzhaltertext angezeigt.

Hey, also bin ich letzte Nacht auf dasselbe Problem gestoßen und habe herausgefunden, dass eine Kombination aus all deiner Antwort und etwas funkelnder Magie einen guten Job macht:

Der HTML:

<input type="date"  name="flb5" placeholder="Datum"     class="datePickerPlaceHolder"/>

Das CSS:

@media(max-width: 1024px) {
   input.datePickerPlaceHolder:before {
      color: #A5A5A5; //here you have to match the placeholder color of other inputs
      content: attr(placeholder) !important;
   }
}

Die jQuery:

$(document).ready(function() {
    $('input[type="date"]').change(function(){
            if($(this).val().length < 1) {
                $(this).addClass('datePickerPlaceHolder');
            } else {
                $(this).removeClass('datePickerPlaceHolder');
            }
    });
});

Erläuterung: Also, was hier passiert, vor allem im HTML , ist dies ziemlich einfach, indem Sie einfach eine grundlegende HMTL5-Datumseingabe durchführen und einen Platzhalter setzen. Nächster Stopp: CSS , wir setzen ein: Vor-Pseudo-Element, um unseren Platzhalter zu fälschen. Es übernimmt lediglich das Attribut des Platzhalters aus der Eingabe selbst. Ich habe dies nur ab einer Ansichtsfensterbreite von 1024px verfügbar gemacht - warum ich es später erzählen werde. Und jetzt die jQuery , nachdem ich ein paar Mal umgestaltet habe, habe ich mir diesen Code ausgedacht, der bei jeder Änderung überprüft, ob ein Wert festgelegt ist oder nicht, wenn dies nicht der Fall ist, wird die Klasse (erneut) hinzugefügt, und umgekehrt .

KENNEN SIE FRAGEN:

• In Chrome gibt es ein Problem mit der Standard-Datumsauswahl. Dafür ist die Medienabfrage gedacht. Es wird der Platzhalter vor dem Standard-Ding 'tt.mm.jjjj' hinzugefügt. Sie können auch den Platzhalter für die Datumseingabe auf 'Datum:' setzen und den Farbfall ohne Wert innerhalb der Eingabe anpassen. Für mich führte dies zu einigen anderen kleineren Problemen, sodass ich ihn einfach nicht auf 'Größer' zeigte 'Bildschirme

hoffentlich hilft das! Cheerio!

Wenn Sie sich nur mit Mobilgeräten beschäftigen:

input[type="date"]:invalid:before{
    color: rgb(117, 117, 117);
    content: attr(placeholder);
}

HTML:

<div>
    <input class="ui-btn ui-btn-icon-right ui-corner-all ui-icon-calendar ui-shadow" id="inputDate" type="date"/>
    <h3 id="placeholder-inputDate">Date Text</h3>
</div>

JavaScript:

$('#inputDate').ready(function () {
$('#placeholder-inputDate').attr('style'
    , 'top: ' + ($('#placeholder-inputDate').parent().position().top + 10)
    + 'px; left: ' + ($('#placeholder-inputDate').parent().position().left + 0) + 'px; position: absolute;');
$('#inputDate').attr('style'
    , 'width: ' + ($('#placeholder-inputDate').width() + 32) + 'px;');
});

Hier ist ein weiterer möglicher Hack, der kein js verwendet und dennoch CSS verwendet content. Beachten Sie, dass :afterwir die Eingabe auf eine andere Weise auswählen müssen , da dies in einigen Browsern für Eingaben nicht unterstützt wirdcontent attr('')

input[type=date]:invalid+span:after {
  content:"Birthday";
  position:absolute;
  left:0;
  top:0;
}

input[type=date]:focus:invalid+span:after {
  display:none;
}

input:not(:focus):invalid {
  color:transparent;
}

label.wrapper {
	position:relative;
}

<label class="wrapper">
	<input
 	  type="date"
  	  required="required" 
	/>
	<span></span>
</label>

Dies funktioniert bei mir als Eingabeelement:

<input name="birthdate" class="" class="wpcf7-form-control wpcf7-date 
 wpcf7-validates-as-required wpcf7-validates-as-date birthdate" value="" 
 aria-required="true" aria-invalid="false" placeholder="birthdate *" 
 type="date">

Dieses CSS zeigt einen permanenten Platzhalter. Der ausgewählte Wert wird nach dem Platzhalter angezeigt.

input[type="date"]:before {
    content: attr(placeholder) !important;
    margin-right: 0.5em;
    display: block;
}
/* only for FF */
@-moz-document url-prefix() {
    input[type="date"]:before {
        content: attr(placeholder) !important;
        margin-right: 0.5em;
        display: block;
        position: absolute;
        left: 200px; /* please adopt */
    }
}

Ich verwende diese Lösung für ein Wordpress-Formular mit Kontaktformular-7-Plugin.

Keine der Lösungen funktionierte für mich unter Chrome in iOS 12 ordnungsgemäß, und die meisten von ihnen sind nicht auf mögliche Eingaben mit mehreren Daten auf einer Seite zugeschnitten. Ich habe Folgendes getan, wodurch im Grunde genommen eine gefälschte Beschriftung über der Datumseingabe erstellt und beim Tippen entfernt wird. Ich entferne auch das gefälschte Etikett, wenn die Breite des Ansichtsfensters mehr als 992 Pixel beträgt.

JS:

function addMobileDatePlaceholder() {
    if (window.matchMedia("(min-width: 992px)").matches) {
        $('input[type="date"]').next("span.date-label").remove();
        return false;
    }

    $('input[type="date"]').after('<span class="date-label" />');

    $('span.date-label').each(function() {
        var $placeholderText = $(this).prev('input[type="date"]').attr('placeholder');
        $(this).text($placeholderText);
    });

    $('input[type="date"]').on("click", function() {
        $(this).next("span.date-label").remove();
    });
}

CSS:

@media (max-width: 991px) {
    input[type="date"] {
        padding-left: calc(50% - 45px);
    }

    span.date-label {
        pointer-events: none;
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        height: 27px;
        width: 70%;
        padding-top: 5px;
    }
}