Legen Sie die Breite der nativen HTML5-Datums- und Zeitauswahl auf iOS-Geräten fest

Lesezeit: 1 Minute

jdehlins Benutzeravatar
jdehlin

Ich verwende die native Datums- und Uhrzeitauswahl mit type=date und type=time für die mobile Version einer Website, an der ich arbeite. Die Eingabefelder respektieren jedoch nicht das CSS, das ich habe.

Desktop:

Desktop

iOS-Geräte:
Geben Sie hier eine Bildbeschreibung ein

Im Wesentlichen benötige ich die beiden Datums- und Uhrzeiteingaben, um etwa 50 % der Breite auszufüllen. Dies ist das HTML und CSS, das ich verwende:

<div class="arriveWrapper">
            <div class="arriveDateWrapper fieldWrapper">
                <input class="arriveDate" name="arriveDate" type="date" placeholder="What date?" />
            </div>
            <div class="arriveTimeWrapper fieldWrapper">
                <input class="arriveTime" name="arriveTime" type="time" placeholder="What time?" />
            </div>
            <div class="clear"></div>
        </div>


.arriveDateWrapper {
    width: 49%;
    margin-right: 2%;
    float: left;
    position: relative;
}

        .arriveDate {
            width: 100%;
            height: 28px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

.arriveTimeWrapper {
    width: 49%;
    float: left;
}

    .arriveTime {
        width: 100%;
        height: 28px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

Wenn mir jemand sagen kann, wie ich dafür sorgen kann, dass die Platzhalter angezeigt werden, wenn ich die native Datums-/Uhrzeitauswahl verwende, wäre das auch großartig.

Danke!

  • Poste den Rest der Struktur

    – David Nguyen

    7. April 2013 um 22:36

  • Ich habe mehr von der Struktur hinzugefügt. Gibt es eine Möglichkeit, die Breite dieser Eingaben festzulegen?

    – jdehlin

    18. April 2013 um 15:23

Fügen Sie dies einfach zu Ihren Stilen hinzu

.arriveDate, .arriveTime  {
  -webkit-appearance: none;
  -moz-appearance: none;
}

Der Grund dafür ist, dass IOS-Geräte die Eingaben standardmäßig über die IOS-Tasten rendern

Carter Medlins Benutzeravatar
Carter Medlin

Um den Verlust von Stilelementen zu vermeiden, die auf andere Eingabefelder angewendet wurden, verwenden Sie Textfeld anstatt keiner.

.arriveDate, .arriveTime  {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

Wenn Sie außerdem möchten, dass alle Datumsfelder wie Textfelder aussehen, aber dennoch wie Datumsfelder funktionieren …

input[type="date"]
{
    display:block;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 1.2em;
}

1451680cookie-checkLegen Sie die Breite der nativen HTML5-Datums- und Zeitauswahl auf iOS-Geräten fest

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy