spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

How to remove arrow from select element


1) Add a pseudo element for your custom arrow icon and position it to the right of the select element such that it overlays the default arrow.

2) Set pointer-events: none; on the pseudo element so that clicking on it doesn't hamper the drop down from opening.

DEMO

.select-style:after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #fafafa
url("http://icons.iconarchive.com/icons/iconsmind/outline/128/Triangle-ArrowDown-icon.png")
no-repeat 98% 4px;
    background-size: 26px 26px;
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none; /* <-- */
}

.select-style {
  border: 1px solid #333;
  width: auto;
  height: 32px;
  overflow: hidden;
  position: relative;
  margin: 40px;
}
.select-style:after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #fafafa
url("http://icons.iconarchive.com/icons/iconsmind/outline/128/Triangle-ArrowDown-icon.png")
no-repeat 98% 4px;
  background-size: 26px 26px;
  position: absolute;
  right: 0;
  top: 0;
  pointer-events: none;
}
.select-style select {
  padding: 9px 8px 0 5px;
  width: 100%;
  border: none;
  font-size: 14px;
}
<div
class="select-style">

  <select>
    <option value="volvo">Please select an
option</option>
    <option
value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option
value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>


Categories : CSS

Related to : How to remove arrow from select element
Style SELECT element dropdown arrow
how is that allowing the click to go through the dropdown image and right to the select element below? pointer-events: none; in the CSS allows the click to go through the image.

Categories : Javascript
jQuery scrollable ul via arrow ( and remove arrow when reached top or bottom end of list )
Try to use this jsfiddle $(function(){ var carousel = $('.carousel ul'); var carouselChild = carousel.find('li'); var clickCount = 0; var canClick = true; $(".btnPrevious").css('color', 'red').show(); itemWidth =......

Categories : Javascript
Not able to perform left arrow and right arrow key operation in extjs grid textfiled column
There are events on the grid catching the keypress. Instead of trying to "insert" html code inside the value of the cell, why don't you just use the default "cellediting" plugin, as specified in the original example? Just move the editor block from the email column to the phone column: Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: Ext.data.StoreManager.lookup('simpsonsStore'),

Categories : Extjs
How to check a select element change when the element name is an array
Ok, as I said, ids should be unique for a page, so for similar items you should use classes: .... <select class="item" name="lines[2][item]"></select> <input class="unit" name="lines[2][unit]" /> <input class="price" name="lines[2][price]" /> <input class="total" name="lines[2][total]" /> .... So, for change event use something like jQuery('.item').change(functio

Categories : PHP
D3 Select Element by Class and Return Element Id
Thankfully, D3 provides a reference to the selection through this: d3.selectAll('.leaflet-clickable').on('click', function() { console.log(d3.select(this).attr('id')); }); Try that

Categories : Javascript
Recently Add
How to start a new column in flex column wrap layout
Add record CSS not rendering Jtable
Inline CSS Does Not Work When Transferred to External Stylesheet
CSS Positioning Issue on Chrome
PhantomJS + CMYK color css3
Wrap an input with pseudo borders made of divs
Site doesn't display styling on Firefox or IE –– works fine with Chrome and Safari
CSS - Position image to the left + partly cut-off + responsive + Bootstrap
Can i cross-fade li elements using angularjs ngAnimate
hidden-sm in bootstrap 3
Ruby on Rails - Bootstrap / Form_for vs input_groups - How to stop styles butting heads
locating joomla files when I do inspet element in firefox
Some Images flicker in IE8
Tooltip CSS ONLY: focus and hover prevents access to following button
Strange shadowed boxes randomly appearing - CSS error?
Bootstrap popover dynamic size
Horizontal List Exceeding Right Margin
How to put !important in all CSS properties using SASS or CSS3?
Wrap content and remove extra whitespace?
Force div's height expand with it's container
Animation delay on page load
CSS Keep on-hover item open until another item is hovered on
Confused by LESS replace() function behavior
How to transform an image in SVG (or CSS) into a non-parallelogram shape?
Ignore CSS declaration on a specific control
Mark space for :after content non-breaking
2 inline images - 1 centered and 1 right using Bootstrap
Bootstrap - three sibling col divs, is this layout possible?
jquery mobile-vertically center two lines of button text
Change footer content in magento
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.