Chrome and Edge don't support "writing-mode" for input or select tag

user_6149690 0
Viewed 358

In Firefox the "writing-mode:vertical-lr" effects on input-tags and select-tags. How can I get the same result within Chrome and Edge?

Code:

.gridContainer {
    display:grid;
    grid-gap:0;
    grid-template-columns:2rem 2rem 16rem;
    grid-template-rows:2rem 2rem 8rem;
    grid-template-areas:
        "verticalSelect verticalDate horizontalName"
        "verticalSelect verticalDate horizontalTitle"
        "verticalSelect verticalDate horizontalDescription";
    background-color:rgba(255,255,255,1);
    border:solid 1px rgb(0,0,0);
    margin:5rem;
    width:20rem;
}

.verticalSelect {
    grid-area:verticalSelect;
}

.verticalDate {
    grid-area:verticalDate;
}

.verticalSelect, .verticalDate {
    writing-mode:vertical-lr;
    transform:rotate(180deg);
    border:solid 1px rgb(0,0,0);
}

.horizontalName{
    grid-area:horizontalName;
    border:solid 1px rgb(0,0,0);
}

.horizontalTitle {
    grid-area:horizontalTitle;
    border:solid 1px rgb(0,0,0);
}

.horizontalDescription {
    grid-area:horizontalDescription;
    border:solid 1px rgb(0,0,0);
    resize: none;
}
<form action="" method="post">
    <div class="gridContainer">
        <select class="verticalSelect" name="prio">
            <option value="A">Prio A</option>
            <option value="B" selected>Prio B</option>
            <option value="C">Prio C</option>
        </select>
        <div class="verticalDate">
            <label for="deadline">Deadline:</label>
            <input type="date" name="deadline">
        </div>
        <input class="horizontalName" type="text" placeholder="Name" name="name">
        <input class="horizontalTitle" type="text" placeholder="Title" name="title">
        <textarea class="horizontalDescription" name="description">Description</textarea>
    </div>
</form>

Result within Firefox

Result within Chrome

Result within Edge

The solution from this Question only works for the label-tag within my example, but not for the input- or select-tags.

forms css html
1 Answers

I found a solution myself that works for me:

I did not use writing-mode and did the entire rotation using "transform: rotate();". Then I achieved the correct positioning via "position:relative;".

.gridContainer {
    display:grid;
    grid-template-columns:2rem 2rem 16rem;
    grid-template-rows:2rem 2rem 9rem;
    grid-template-areas:
        "verticalDiv verticalDate horizontalName"
        "verticalDiv verticalDate horizontalTitle"
        "verticalDiv verticalDate horizontalDescription";
    border: 1px solid black;
    margin:0;
    width:20rem;
}

.verticalDiv {
    grid-area:verticalDiv;
}

.verticalSelect{
    position: relative;
    transform:rotate(270deg);
    top:5.5rem;
    left:-5.5rem;
    height:2rem;
    width:13rem;
    border:1px solid black;
}

.verticalDate {
    grid-area:verticalDate;
    border:1px solid black;
}

.verticalDate input {
    position:relative;
    transform:rotate(270deg);
    background-color:transparent;
    height:2rem;
    width:8rem;
    top:-1rem;
    left:-3rem;
    border:0px none transparent;
    outline:none;
}

.verticalDate label {
    position: relative;
    transform: rotate(180deg);
    writing-mode: vertical-lr;
    background-color:transparent;
    line-height:2rem;
    top:8.5rem;
    left:0rem;
}

.horizontalName{
    grid-area:horizontalName;
    border:solid 1px black;
}

.horizontalTitle {
    grid-area:horizontalTitle;
    border:solid 1px black;
}

.horizontalDescription {
    grid-area:horizontalDescription;
    border:solid 1px black;
    resize: none;
    margin:0;
}
<form action="" method="post">
        <div class="gridContainer">
            <div class="verticalDiv">
                <select class="verticalSelect" name="prio">
                    <option value="A">Prio A</option>
                    <option value="B" selected>Prio B</option>
                    <option value="C">Prio C</option>
                </select>
            </div>
            <div class="verticalDate">
                <label for="deadline">Deadline:</label>
                <input type="date" name="deadline">
            </div>
            <input class="horizontalName" type="text" placeholder="Name" name="name">
            <input class="horizontalTitle" type="text" placeholder="Title" name="title">
            <textarea class="horizontalDescription" name="description">Description</textarea>
        </div>
    </form>

user_61496900
Related