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

【问题标题】：Chrome and Edge don't support "writing-mode" for input or select tagChrome 和 Edge 不支持输入或选择标签的“书写模式”
【发布时间】：2020-12-09 05:10:37
【问题描述】：

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

Result within Firefox

Result within Chrome

Result within Edge

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

【问题讨论】：

我知道这不是您想要的答案，但另一种解决方案是废弃内置的选择/日期选择器并使用已经存在的自定义插件。优点是使用自定义选择插件，它将选择转换为允许您更改 CSS 的 div/列表，并且使用自定义日期选择器，您可以单击非输入元素来调用和使用日期选择器。
@imvain2：感谢您的提示！我不确定我的公司是否会接受自定义插件，但我认为如果没有，我可以自己用 javascript 解决它。无论如何，我应该提高我的 javascript 知识。 ;-)
创建自定义选择插件应该相对容易，您可以在网上找到教程。但是，日期选择器将是一个更大的问题。您基本上可以将其呈现为：每个人都使用 Firefox，使用不同的布局或使用自定义插件。如果这是他们关心的问题，那里有大量免费的日期选择器。

标签： html css forms

【解决方案1】：

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

我没有使用写作模式，而是使用“transform: rotate();”完成了整个旋转。然后我通过“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>

【讨论】：