Question 241090 in CSS Question posted in
Some basic documentation can be found here.

Css – How to place the select arrow svg near to the right edge

The select element arrow is customized :

.listbox_length_menu_datatable {
  background-color: #E8E8E8;
  border: none;
  border-radius: 5px;
  font-size: 0.58em;
  font-weight: 650;
  padding-left: 0.4rem !important;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  padding-right: 1.5rem !important;
  background-position: calc(100% - 0.75rem) center !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 50px !important;
}

.listbox_length_menu_datatable.medium {
  background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
}
<select class="form-select listbox_length_menu_datatable medium">
  <option value='5'>5</option>
  <option value='10'>10</option>
  <option value='20'>20</option>
  <option value='30'>30</option>
  <option value='-1'>Tous</option>
</select>

At runtime the arrow is a bit far from the right border : enter image description here
I want it to be like this enter image description here

How to achieve that ?

Tags:

2

Answers


  1. 0

    You are telling it to be positioned 100% left minus 0.75rem:

    background-position: calc(100% - 0.75rem) center !important;

    So change that as appropriate:

    background-position: calc(100% - 0.25rem) center !important;

    EG:

    .listbox_length_menu_datatable {
  background-color: #E8E8E8;
  border: none;
  border-radius: 5px;
  font-size: 0.58em;
  font-weight: 650;
  padding-left: 0.4rem !important;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  padding-right: 1.5rem !important;
  background-position: calc(100% - 0.25rem) center !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 50px !important;
  outline:1px solid red;
}

.listbox_length_menu_datatable.medium {
  background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
}
    <select class="form-select listbox_length_menu_datatable medium">
  <option value='5'>5</option>
  <option value='10'>10</option>
  <option value='20'>20</option>
  <option value='30'>30</option>
  <option value='-1'>Tous</option>
</select>
    Login or Signup to reply.
  2. 0

    Each browser renders the "Select" element with its distinct style. To address this, you can reset all the styles for the "Select" element, enclose it within a "div" container, and apply all the styles within that container.

    .listbox_length_menu_datatable {
            background-color: #E8E8E8;
            border: 1px solid #bbb;
            border-radius: 5px;
            font-size: 0.58em;
            font-weight: 650;
            
            background-position: calc(100% - 0.45rem) center !important;
            -moz-appearance: none !important;
            -webkit-appearance: none !important;
            appearance: none !important;
            width: 60px !important;
        }
        .listbox_length_menu_datatable.medium {
            background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
        }
        .listbox_length_menu_datatable select{
            width: 100%;
            background-color: transparent;
            border: none;
            border-radius: 0;
            -moz-appearance: none !important;
            -webkit-appearance: none !important;
            appearance: none !important;
            outline: none;
            padding-left: 0.4rem !important;
            padding-top: 0.1rem !important;
            padding-bottom: 0.1rem !important;
            padding-right: 1.3rem !important;
        }
    <div class="form-select listbox_length_menu_datatable medium">
        <select class="">
            <option value='5'>5</option>
            <option value='10'>10</option>
            <option value='20'>20</option>
            <option value='30'>30</option>
            <option value='-1'>Tous</option>
          </select>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search