Help with two styles to a contact form, please.

[Anonymous]

Greetings Paul,

Great explanation and link, thanks!

I am still unclear on something. You had stated above that

…with my example but you’d need to supply an image for that button where I have the arrow code.

Is the down arrow still created by the browser here? Where would the link to an image be placed in the code you created? I ask because I see this could be useful in other applications where a drop down list is needed.

Many Thanks!

[paulob]

Hi Michael,

In my codepen example the arrow is created using the :after pseudo element and absolutely placing a ‘css triangle” on top of the element. (I also used the before element to create a background to hide any text that might be near the arrow.)

The example in the codepen uses a ‘trick’ where you wrap the select in an element that is set to be about 30px smaller width than the width set on the select. This means the select sticks out of the parent which is just enough room for the browser select arrow to be outside the main parent. You then hide the overflow on the parent and that means the arrow is now missing. Using the after element you can then absolutely place something on top of the select to represent the new arrow and it will be the same in all modern browsers. I used the css triangle trick but there is no reason why it couldn’t be a real image instead.

You can only do this in modern browsers because normally placing something on top means that you can’t then click the element underneath which is where ‘pointer-events’ comes into play and allows the click to pass through this new element and interact with the select beneath.

Hope that explains it :)

[Anonymous]

Greetings Paul,

I understand how the arrow is created, and thanks for the very helpful link. It appears however that the Codepen created by you isn’t fully viewable by me as I see nothing that causes the arrow to be created.

Best Regards.

[paulob]

HI Michael,

If you click on “Edit Pen” in the bottom left corner of the codepen you will get access to the html and css.

This is the CSS that creates the arrow:

.select-wrap:after{
    content:"";
    position:absolute;
    right:8px;
    top:8px;
    z-index:2;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;    
    border-top: 5px solid #000;
    pointer-events:none;
}

[Anonymous]

Thank you Paul,

I just noticed this an will look at it further.

I find it interesting, and strange, how that creates the arrow. I’ll toy around with the coding to learn what happens with changes.

Many thanks!

[Author]

Posts