CODEWITHSUNDEEP
htmlcss
thehiddencheese
thehiddencheese

Reputation: 93

HTML select will not center text on chrome

I am having an issue where the select option text is not centered on chrome. On firefox using text-align: center on the select works, however it does not for chrome. I have not tested on safari. I have tried using text align center on the select option but this also did not provide any fix.

.grid1 {
  grid-area: 1 / 1 / 2 / 2;
}

.side-bar {
  display: flex;
  justify-content: center;
  background-color: #fafafa;
  height: 100vh;
  border-right: solid #eeeeee 1px;
  color: #333;
}

.side-bar h3 {
  padding: 1rem 0rem;
}

.select {
  height: auto;
  width: 80%;
  margin: 1rem;
  overflow: hidden;
}

select {
  color: #333;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  width: 10rem;
  text-align: center;
}

select option {
  text-align: center;
}
<section class="side-bar grid1">
  <div class="select">
    <h3>Filter</h3>
    <select name="todos" class="filter-todo">
      <option value="all">All</option>
      <option value="completed">Completed</option>
      <option value="uncompleted">Uncompleted</option>
    </select>
    <h3>Saved Lists</h3>
    <form class="new-list-form">
      <button class="new-list-button form-button" type="submit">
              <i class="las la-plus-square"></i>
            </button>
      <input type="text" class="list-input" placeholder="Add list name" />
    </form>
    <select id="task-lists" name="lists" class="task-lists">
      <option>Select a list</option>
    </select>
    <button class="delete-button form-button">Delete List</button>
  </div>
</section>

Upvotes: 2

Views: 791

Answers (1)

Arex
Arex

Reputation: 694

Using text-align-last fixes the problem.

.grid1 {
  grid-area: 1 / 1 / 2 / 2;
}

.side-bar {
  display: flex;
  justify-content: center;
  background-color: #fafafa;
  height: 100vh;
  border-right: solid #eeeeee 1px;
  color: #333;
}

.side-bar h3 {
  padding: 1rem 0rem;
}

.select {
  height: auto;
  width: 80%;
  margin: 1rem;
  overflow: hidden;
}
select {
  color: #333;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  width: 10rem;
  text-align: center;
  text-align-last: center;
}

select option {
  text-align: center;
}

Upvotes: 2

Related Questions