Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to put background-color only a section of a select? CSS

Tags:

html

css

I have this sample:

link

CODE HTML:

<div class="select-style">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

CODE CSS:

.select-style {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    width: 120px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%;
}

.select-style select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.select-style select:focus {
    outline: none;
}

I put a picture to understand better what I want to do.

enter image description here

How can I do this on my structure?

Does the current structure? Or have another structure created HTML?

Thanks in advance!

like image 784
Marius Avatar asked Oct 07 '15 05:10

Marius


People also ask

How do you add a background color to a section part?

To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.

How do you change the color of a section in CSS?

To change the color of the inline text, go to the section of your web page. Simply add the appropriate CSS selector and define the color property with the value you want.

Can you give a div a background color?

To set a background color for a div or related element in CSS, you use the background-color property.


1 Answers

You can make use of linear-gradient combined with background-image.

  1. The background-image property allows combination of url() and linear-gradient() so you may try separating the values. Same for the background-position as we are controlling the url image position with 95px value while the linear gradient is undisturbed with center center.
  2. Using linear-gradient, The first 70% is filled with background color white while the other 30% will be light gray colored in the example.
  3. Create a border using a small fraction of the percentage value i.e. 70% gray to 71% gray in the linear gradient.

.select-style {
  background-image: url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif"), linear-gradient(to right, white 70%, gray 70%, gray 71%, lightgray 71%, lightgray 100%);
  background-position: 95px center, center center;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 120px;
}
.select-style select {
  padding: 5px 8px;
  width: 130%;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.select-style select:focus {
  outline: none;
}
<div class="select-style">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>
like image 81
m4n0 Avatar answered Sep 23 '22 16:09

m4n0