Chrome Does Not Support "Writing-Mode" for Button Tag

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

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>

How to fix writing-mode vertical-rl not display correctly via Google Chrome

Just add white-space: pre; to forbid the browser from breaking this into multiple lines.

p.testnew {    writing-mode: vertical-rl;    white-space: pre;}

<table width="100%" align="center"><tbody align="center"><tr align="center"><td rowspan="2" width="15%">ผลิตภัณฑ์</td><td rowspan="2" width="10%">เกรด</td><td colspan="3" width="20%">มาตรฐานเปรียบเทียบ</td><td colspan="9" width="20%">ส่วนผสมทางเคมี (%)</td><td rowspan="2" width="10%">สภาพจำหน่าย</td><td rowspan="2" width="10%">การใช้งาน</td><td rowspan="2" width="15%">ตัวอย่างการใช้งาน</td></tr><tr><td width="64">AISI</td><td width="81">DIN</td><td width="76">JIS</td><td width="26">C</td><td width="26">Si</td><td width="26">Mn</td><td width="26">Cr</td><td width="26">Mo</td><td width="26">Ni</td><td width="26">V</td><td width="26">W</td><td width="26">Oth.</td></tr><tr><td colspan="17" width="1090">เหล็กอะไหล่ชุบแข็ง</td></tr><tr><td width="162"><img src="http://maxsteelthai.com/new/wp-content/uploads/2019/08/image001.png" alt="Sample Image" /></td><td width="64">1.7225</td><td width="64"><p class="testnew">4140</p></td><td width="81"><p class="testnew">42CrMo4</p></td><td width="76"><p class="testnew">SCM440H</p></td><td width="26"><p class="testnew">0.38-0.45</p></td><td width="26"><p class="testnew">0.10-0.40</p></td><td width="26"><p class="testnew">0.6-0.9</p></td><td width="26"><p class="testnew">0.9-1.2</p></td><td width="26"><p class="testnew">0.15-0.3</p></td><td width="26"><p class="testnew">-</p></td><td width="26"><p class="testnew">-</p></td><td width="26"><p class="testnew">-</p></td><td width="26"><p class="testnew">P/0.035, S/0.035</p></td><td width="102">Pre-Hardened 28-33 HRC</td><td width="250">มีส่วนผสมของ Cr-Mo-Mn เหมาะกับงานอะไหล่ชิ้นส่วนเครื่องจักร เช่น เพลาขับ เพลาข้อเหวี่ยง ก้านสูบ เฟือง บุช</td><td width="162"><img src="http://maxsteelthai.com/new/wp-content/uploads/2019/08/image003.png" alt="Sample Image" /></td></tr><tr><td width="162"><img src="http://maxsteelthai.com/new/wp-content/uploads/2019/08/image006.png" alt="Sample Image" /></td><td width="64">1.6582</td><td width="64"><p class="testnew">4340</p></td><td width="81"><p class="testnew">34CrNiMo6</p></td><td width="76"><p class="testnew">SNCM8</p></td><td width="26"><p class="testnew">0.30-0.38</p></td><td width="26"><p class="testnew">0.4</p></td><td width="26"><p class="testnew">0.5-0.8</p></td><td width="26"><p class="testnew">1.3-1.7</p></td><td width="26"><p class="testnew">0.15-0.3</p></td><td width="26"><p class="testnew">1.3-1.7</p></td><td width="26"><p class="testnew">-</p></td><td width="26"><p class="testnew">-</p></td><td width="26"><p class="testnew">P/0.035, S/0.030</p></td><td width="102">Pre-Hardened 25-30 HRC</td><td width="250">มีส่วนผสมของ Cr-Mo Low Alloyed เหมาะกับงานอะไหล่ชิ้นส่วนเครื่องจักรรองรับความเครียดสูงได้ดี เช่น เพลาขับ เพลาข้อเหวี่ยง ก้านสูบ เฟือง บุช</td><td width="162"><img src="http://maxsteelthai.com/new/wp-content/uploads/2019/08/image016.png" alt="Sample Image" /></td></tr></tbody></table>

Button (using button tag) does not display in Opera

It looks like Opera doesn't like showing the native-look button background on an element with both border-radius and border styles set, but no background-color.

To make it work you either need to specify a background-color for the element, or remove/override either the border-radius or border styles defined in style.css near line 208 (at least just for that element).

You can see the differences between the buttons with only very slight differences in style.

CSS issue: Chrome adds 3px extra margin-right to text field

Although, this may be dependent on the browser version, Chrome generally have these CSS rules for the input element:

-webkit-appearance: textfield;
background-color: white;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
padding: 1px;
border: 2px inset;

and these for the input, textarea, keygen, select, button:

text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;

and this for input, textarea, keygen, select, button, meter, progress:

-webkit-writing-mode: horizontal-tb;

So, this does not relate to the browser stylesheet rules.

UPDATE

If you add a white-space like

space
tab
newine ( This is your case )

between them, a gap will appear.

Depending on the situation, you can use either of the following methods to get rid of the gap:

Add a negative margin-left
Use float
Remove the whitespace between the elements, which can be done:
1- Put theme in one line
```
<input type="text"><input type="text"><input type="text">
```
2- Removing the space ( Don't worry, it is correct! :) )
```
<input type="text"><
input type="text"><
input type="text">
```
3- Use HTML comments
```
<input type="text"><input type="text">
```
I suggest you to use the Number 1 method (Put theme in one line), but either will work.