search-appearance-basic.html | Explore in Territory

<!DOCTYPE html>
<meta name='color-scheme' content="light dark">
<body>
<style>
input {
    margin: 4px;
}

.inputtext {
    border: 1px solid #bdc7d8;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    padding: 3px;
}
.inputsearch {
    background:white url(../resources/green.jpg) no-repeat 3px 4px;
    padding-left:17px;
}
</style>
</style>

<!-- no style for reference -->
<input type="search" value="foo"> <input type="search" value="foo" id="hovered"><br>

<input type="search" readonly value="foo">
<input type="search" disabled value="foo"> <br>

<!-- border -->
<input type="search" value="foo" style="border: 3px solid lime;">
<input type="search" value="foo" style="border-radius: 6px;"> <br>
<div style="background-color: #888888; width: 163px; height: 45px; background-position: 100% 0;">
  <input type="search" value="default text" style="margin-top: 9px; margin-left: 11px; border-radius: 9px; width: 133px;  background-color: #00FF00;">
</div>

<!-- background -->
<input type="search" value="foo" style="background: linear-gradient(to bottom, #dea 0%,#9c7 44%,#494 100%);"> <br>

<!-- shadow -->
<input type="search" value="foo" style="box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4px 4px rgba(0,255,0,0.5);"> <br>
 
<!-- font-size -->
<input type="search" value="foo" style="font-size: 16px;">
<input type="search" value="foo" style="font-size: 20px;">
<input type="search" value="foo" style="font-size: 24px;"> <br>

<!-- zoom -->
<input type="search" value="foo" style="zoom: 1.5;">
<input type="search" value="foo" style="zoom: 2;"> <br>
<input type="search" results="0" value="foo" style="zoom: 1.5;">
<input type="search" results="0" value="foo" style="zoom: 2;"> <br>

<!-- various style -->
<input type="search" class="inputtext inputsearch" title="Search for Events" placeholder="Search for Events" id="q_dashboard" name="q" value="" results="10" />

<script>
var input = document.getElementById('hovered');
if (window.eventSender)
    eventSender.mouseMoveTo(input.offsetLeft + input.offsetWidth / 2, input.offsetTop + input.offsetHeight / 2);
document.querySelector('input[readonly]').focus();
</script>
</body>
chromium/third_party/blink/web_tests/fast/forms/color-scheme/search/search-appearance-basic.html
