How to change the style of an "input" field of type "range" using only CSS (and maybe some webkits)?

Asked

Viewed 2,285 times

1

I want to modify a field’s value indicator <input type="range"/>. I want to change the format and color of this indicator, as shown in the following images.

Campo atual

This is the field I want to modify. The indicator has this format of "box, and I want to modify to a format of "ball", "circle", etc., as in the examples below:

Campo modelo (1) Campo modelo(2)

HTML: <p> <input type="range" id="campo" value="25" disabled/> </p>

CSS: 

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    width: 18em;
    height: 0.5em;
    position: relative;
    left: 4em;
    border-radius: 5px;
    background-color: #3071a9;
    outline: none;
}

input[type=range]::-webkit-slider-thumb{
    border-radius: 50%;
}



#campo::-webkit-slider-thumb{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: blue;
}

Thanks in advance.

html css html5 css3 input

2 answers

4


Guy for the style "catch" first vc have to remove the original style, for that you can use a all:unset and then a -webkit-appearance: none; and then put your styles. To work in Firefox you need the seeing prefix -moz-range-thumb and in MS browsers -ms-

inserir a descrição da imagem aqui

Behold 

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    width: 18em;
    height: 0.5em;
    position: relative;
    left: 4em;
    border-radius: 5px;
    background-color: #3071a9;
    outline: none;
}

/* para o Fire Fox */
#campo::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: blue;
  border: none;
}

/* para browsers da MS */
#campo::-ms-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: blue;
  border: none;
}

#campo::-webkit-slider-thumb{

  all:unset; /* limpa os estilos iniciais */
  -webkit-appearance: none; /* remove a aparencia padão */
  border: none;
  
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: blue;
}
<p><input type="range" id="campo" value="25" disabled/> </p>

  • Dude, it was more than okay, thanks. If you don’t mind, one more 'small' question... I saw that you have 'gold' in CSS in Stack Overflow. How did you learn? Recommend some course, book or something to improve? Thank you, and sorry for the inconvenience.

  • 2

    @Arthursiqueira Guy actually where I most learn CSS is in the Mozilla documentation, there is like the Wikipedia of CSS, you enter a property, and has link to another property and so you are clicking on everything you do not know and reading and mainly testing there locally to see how it works etc. Another option is to search for basic tutorials on Youtube same, there tb has good things, and watch and try to replicate the examples. )

  • 1

    This will help you a lot, but the main thing is to test and replicate in hand the content you will see. This helps a lot to understand CSS and see how it works in practice. 80% of CSS you will practically not use, but the other 20% vc will use 80% of the time! Rule 80/20 :), then study grazing base, box model, position, flex, display, etc

  • Thanks, Hugo, you helped me too!

  • @Leandronascimento speaks Leandro, good that helped you there, if you are researching this other issue tbm may have something that interests you https://answall.com/questions/265316/range-mudar-cor-da-barra-progressio-no-chrome/ abs

2

You must use the pseudo selector ::-webkit-slider-runnable-track to style the field rail and the pseudo selector ::-webkit-slider-thumb to style the "selector" of the field:

input[type='range'] {
  cursor: pointer;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

/** 
 * Use o pseudo-seletor "::-webkit-slider-runnable-track" para customizar o "trilho" do campo.
 */
input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 10px;
  background: #1a86c8;
}

/** 
 * Use o pseudo-seletor "::-webkit-slider-thumb" para customizar o "seletor" do campo.
 */
input[type='range']::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -4.5px;
  background-color: blue;
  border-radius: 60px;
}
<input type="range" min="0" max="100" />

To learn more, see:

Browser other questions tagged html css html5 css3 input

You are not signed in. Login or sign up in order to post.