html - Chrome 和 Edge 不支持输入或选择标签的“书写模式”

Question

在 Firefox 中，“writing-mode:vertical-lr”对输入标签和选择标签有影响。如何在 Chrome 和 Edge 中获得相同的结果？

代码：

.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>

Firefox 中的结果

Chrome 中的结果

边缘内的结果

此问题的解决方案仅适用于我的示例中的标签标签，但不适用于输入标签或选择标签。

标签： htmlcssforms

Answer 1

我自己找到了一个适合我的解决方案：

我没有使用写作模式，而是使用“transform：rotate();”完成了整个旋转。然后我通过“位置：相对；”实现了正确的定位。

.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>