<!DOCTYPE html>
<style>
input {
writing-mode: vertical-rl;
}
.appearance-none {
appearance: none;
}
.rtl {
direction: rtl;
}
</style>
<p>This test is a basic check for using vertical-rl writing mode.</p>
<p>When appearance is auto:</p>
<input type="email" value="[email protected]" />
<input type="number" value="100" />
<input type="password" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="tel" value="123-456-7890" />
<input type="text" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="url" value="https://example.com" />
<input type="email" class="rtl" value="[email protected]" />
<input type="number" class="rtl" value="100" />
<input type="password" class="rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" class="rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="tel" class="rtl" value="123-456-7890" />
<input type="text" class="rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="url" class="rtl" value="https://example.com" />
<br>
<p>When appearance is none:</p>
<input type="email" class="appearance-none" value="[email protected]" />
<input type="number" class="appearance-none" value="100" />
<input type="password" class="appearance-none" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" class="appearance-none" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="tel" class="appearance-none" value="123-456-7890" />
<input type="text" class="appearance-none" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="url" class="appearance-none" value="https://example.com" />
<input type="email" class="appearance-none rtl" value="[email protected]" />
<input type="number" class="appearance-none rtl" value="100" />
<input type="password" class="appearance-none rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" class="appearance-none rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="tel" class="appearance-none rtl" value="123-456-7890" />
<input type="text" class="appearance-none rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="url" class="appearance-none rtl" value="https://example.com" />
<br>
Codebase Browser
chromium