Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 27, 2018 at 6:46 pm #933816
    webWahine

    Hello
    I have added an image to the right side of my select pulldowns with the css, below, on my form. I’d like to use a fontello icon instead, specifically icon=’ue877′ (the small down arrow). I think it might be involve ‘before’ css but I’m not sure. Please advise. Thank you :)

    /* use image for pulldown arrow */

    #top select {
    border: none;
    color: #53565A !important;
    border-bottom: 1px solid #53565A !important;
    background: #fff url(“/images/formArrow.png”) no-repeat center right !important;
    }

    /* hide the firefox pulldown arrow */

    select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: ”;
    }

    March 28, 2018 at 11:38 am #934148
    Vinay

    Hey webWahine,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #top select:after {
	z-index:9999!important;
    font-family: 'entypo-fontello';
    content:'\e802'!important;
    color: #000;
    padding: 12px 8px;
    position: absolute; 
    right: 0; 
    top: 0;
    background: redimportant;    
    text-align: center;
    width: 30px;
    height: 100%;      
    pointer-events: none;
}

    Best regards,
    Vinay

    March 28, 2018 at 8:39 pm #934489
    webWahine

    Hi Vinay
    That didn’t work because it didn’t target it but I looked around and figured it out. I wrapped my select in a div called select-container and then applied it to the div, et voila! Thank you! My code is here for others :)

    /* wrap each select in a div for the fontello icon arrow */

    .select-container {
    position: relative;
    }

    /* use fontello icon for pulldown arrow *******************/

    .select-container::before {
    z-index:9999!important;
    font-family: ‘entypo-fontello’;
    content:’\e877′!important;
    color: #000;
    padding: 12px 8px;
    position: absolute;
    right: 0;
    top: 0;
    background: transparent !important;
    text-align: center;
    line-height: 12px; /* adjust vertical positioning */
    width: 30px;
    height: 100%;
    pointer-events: none;
    }

    March 28, 2018 at 10:40 pm #934601
    Vinay

    Hi,

    Thank you for getting back to us and sharing the tip which worked for you well. I hope this will help others too :)

    We will close this ticket in case you have any issue please open a new ticket.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Use a fontello icon in a pulldown select form field’ is closed to new replies.