Firefox Select Element Doubles Text-Indent Value

Firefox select element doubles text-indent value

Explaining what @sydonia said:

You'll just have to put this code after the select rule in your CSS:

@-moz-document url-prefix() {
    select {
       text-indent: 50px;
    }
}

Text-indent set with javascript has double value in firefox

For some reason applying the text-indent to the div containing the select list works fine.

Remove text indentation from select (Windows)

This is a combination of some answers, comments and my own IE11 hack. I've tested it in IE11, Edge, Chrome, Firefox (Windows) and Safari 10 (macOS) and it works:

.select-container {  overflow: hidden;}
select {  font-size: 18px;  height: 38px;  line-height: 38px;  padding: 0;  width: 100%;  background-color: red;  color: #000000;  display: block;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  outline: 0;  border-color: #000000;  border-width: 0 0 1px 0;  border-style: solid;}
option {  padding: 0;}

/* Firefox: */
@-moz-document url-prefix() {  select {    text-indent: -2px;  }}

/* Edge: */
@supports (-ms-ime-align: auto) {  select {    width: calc(100% + 4px);    margin-left: -4px;  }}

/* IE11: */
@media screen and (-ms-high-contrast: active),screen and (-ms-high-contrast: none) {  select {    width: calc(100% + 4px);    margin-left: -3px;  }}

<div class="select-container">  <select>    <option value="test1">Test 1</option>    <option value="test2">Test 2</option>    <option value="test3">Test 3</option>  </select></div>

How to remove the arrow from a select element in Firefox

Okay, I know this question is old, but 2 years down the track and mozilla have done nothing.

I've come up with a simple workaround.

This essentially strips all formatting of the select box in firefox and wraps a span element around the select box with your custom style, but should only apply to firefox.

Say this is your select menu:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

And lets assume the css class 'css-select' is:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

In firefox, this would display with the select menu, followed by the ugly firefox select arrow, followed by your nice custom looking one. Not ideal.

Now to get this going in firefox, add a span element around with the class 'css-select-moz':

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

Then fix the CSS to hide mozilla's dirty arrow with -moz-appearance:window and throw the custom arrow into the span's class 'css-select-moz', but only get it to display on mozilla, like this:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

Pretty cool for only stumbling across this bug 3 hours ago (I'm new to webdesign and completely self-taught). However, this community has indirectly provided me with so much help, I thought it was about time I give something back.

I have only tested it in firefox (mac) version 18, and then 22 (after I updated).

All feedback is welcome.

How to keep indent for second line in ordered lists via CSS?

Update

This answer is outdated. You can do this a lot more simply, as pointed out in another answer below:

ul {
  list-style-position: outside;
}

See https://www.w3schools.com/cssref/pr_list-style-position.asp

Original Answer

I'm surprised to see this hasn't been solved yet. You can make use of the browser's table layout algorithm (without using tables) like this:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Demo: http://jsfiddle.net/4rnNK/1/

To make it work in IE8, use the legacy :before notation with one colon.

Cannot remove outline/dotted border from Firefox select drop down

Found my answer here: https://stackoverflow.com/a/18853002/1261316

It wasn't set as the correct answer, but it worked perfectly for me:

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
select {
    background: transparent;
}

Foundation 5 Select boxes style in Firefox

The best answer was How to Remove the Arrow From a Select Tag in Firefox

---

Related Topics