0

I have a dropdown where the overflow text is gradient out. There's transition applied to the selection's wrapper but now it looks a bit odd when it's hovered out. How can I make it look better?

html snippet:

<div class="durationDropdown">
  <select role="listbox" class="durationSelect">
   <option value="0">Less than 1 month</option>
  </select>
</div>

css snippet:

.container {
  width: 150px;
}

.durationDropdown {
  padding: 0px;
  flex: 1;
  text-align: left;
  position: relative;
  cursor: pointer;
  height: 5.1875rem;
  transition: 250ms;
  border: 1px solid #eee;
}

.durationDropdown::after {
  content: "";
  display: block;
  width: 40px;
  top: 0%;
  right: 0;
  height: 100%;
  position: absolute;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 63%);
  pointer-events: none;
}

.durationDropdown:hover::after,
.durationDropdown:active::after {
  background: none;
}

.durationDropdown:hover {
  background: black;
}

Here's my fiddle where you can see how it looks like and the rest of the css in the fiddle. Any help/suggestions would be great!

RH1922
  • 45
  • 1
  • 8

1 Answers1

0

I am afraid you cannot add transition to the gradient, see details here Use CSS3 transitions with gradient backgrounds.

What you really see it's smooth changing of the 'color' property but not the gradient transition. If you want to hide a part of the sentence with a gradient and have a smooth transition on it, you could do like so:

  • Add transition to 'durationDropdown::after' element and replace 'background: none;' by 'opacity: 0;' like so:
.durationDropdown::after {
  ...
  transition: 250ms opacity ease-in-out;
  ...
}

.durationDropdown:hover::after,
.durationDropdown:active::after {
  /* background: none; */
  opacity: 0;
}
Egor
  • 248
  • 7
  • 17
  • Hmm, I tried that but it doesn't seem to do anything – RH1922 Mar 20 '19 at 08:42
  • @RH1922 try to increase transition time, if it's not noticeable. See example here https://jsfiddle.net/sfmncov8/4/ . I removed color changing on hover for selected item, just to see the transition. – Egor Mar 20 '19 at 17:26