terminal.css
terminal.css copied to clipboard
Fix height input element
In chrome w11, input element see diferent height
types input: date and time
<form action="#">
<fieldset>
<legend>Event Date</legend>
<div class="form-group">
<label for="event-date">Event date:</label>
<input type="date" id="event-date" name="event-date">
</div>
<div class="form-group">
<label for="event-time">Event time:</label>
<input type="time" id="event-time" name="event-time">
</div>
<div class="form-group">
<label for="event-timezone">Event Timezone:</label>
<select id="event-timezone" name="event-timezone"></select>
</div>
<div class="form-group">
<label for="audience">Audience:</label>
<textarea id="audience" cols="30" rows="5" name="audience">Textarea text</textarea>
</div>
<div class="form-group">
<label for="submit">Input Button:</label>
<button class="btn btn-default" type="submit" role="button" name="submit" id="submit">Generate</button>
</div>
</fieldset>
</form>
Solved, added type date and time
input[type=email], input[type=number], input[type=password], input[type=search], input[type=text], input[type=date], input[type=time] {
border: 1px var(--input-style) var(--font-color);
width: 100%;
padding: .7em .5em;
font-size: 1em;
font-family: var(--font-stack);
-webkit-appearance: none;
border-radius: 0;
}
And fix select element
select {
border: 1px var(--input-style) var(--font-color);
width: 100%;
padding: .7em .5em;
font-size: 1em;
font-family: var(--font-stack);
border-radius: 0;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position: right .5em bottom .5em;
}
Ill review this and try to bring it into the next version. I have to find some spare time :) Thanks for your feedback!