Border Around Select Elements

*This has been updated here*

IE7 and below don’t support styling of the select element. Here’s a great way round this using JQuery based on this experiment .

function addBordersToSelectElement(selectElement) {
    if ($.browser.msie && $.browser.version < 8 ) {

        /* Create a container that is two pixel smaller.  This will have a 1px border added though CSS. */
        var containerElement = "<span class='left selectElementBorderRemover requiredField'\
         style='position: relative;display:block;overflow:hidden;width:0;height:0'></span>"

        /* move the select element up and left to hide its border */
        $(selectElement).css("position", "absolute");
        $(selectElement).css("top", "-2px");
        $(selectElement).css("left", "-2px");

        //Attach event to capture any resize through text size change
        $(selectElement).resize(function() { setContainerWidth($(this)) });

function setContainerWidth(selectElement) {
    var containerWidth = $(selectElement).width();
    containerWidth = containerWidth - 2;
    var containerHeight = $(selectElement).height();
    containerHeight = containerHeight - 2;


You can then apply a border to the container. In this case I used it along side validation with the following.

function checkValueAndUpdateRedBorder(validatedItem) {
    var validatedItemId = $(validatedItem).attr("id");

    if (validatedItem.attr("value") != "") {
    } else {

    //If validatedItem is a select
    if ($(validatedItem).parent().hasClass("selectElementBorderRemover")) {
        var selectParent = $(validatedItem).parent();

        if ($(validatedItem).hasClass("requiredField")) {
        } else {

    function removeRequiredField(element) {

    function addRequiredField(element) {
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: