terminal.css icon indicating copy to clipboard operation
terminal.css copied to clipboard

Fix height input element

Open webserveis opened this issue 2 years ago • 2 comments

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>

webserveis avatar Jan 02 '23 14:01 webserveis

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;
}

webserveis avatar Jan 02 '23 15:01 webserveis

Ill review this and try to bring it into the next version. I have to find some spare time :) Thanks for your feedback!

Gioni06 avatar Jan 10 '23 22:01 Gioni06