CODEWITHSUNDEEP
htmlcssinternet-explorer
Tsukimoto Mitsumasa
Tsukimoto Mitsumasa

Reputation: 582

Text-decoration: line-through not working on IE?

I have this

.strike{
    text-decoration: line-through;
}

and every time my disable() is called, it will disable the <option>s from my <select> and add this class but it does not work on IE. Yes, my <option>s are disabled just fine but the text-decoration fails on IE. What is the workaround for this? Thanks.

Edit: I just found out that text-decoration: line-through does not work also on Chrome.

Upvotes: 2

Views: 7306

Answers (6)

Ansar Ahmed
Ansar Ahmed

Reputation: 31

My issue was text-decoration: line-through; not working in IE. I was using shorthand for setting one or more individual text-decoration values in a single declaration (e.g. text-decoration: line-through dashed blue).I found it is not supported yet. https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

If you need another color for your underline/line-through use an additional span element.

<span style="color:red; text-decoration: line-through;"><span style="color: blue; text-decoration: none">Try this!</span></span>

Not sure if this will help you in your case.

Upvotes: 2

Expert Soft Tech Solution
Expert Soft Tech Solution

Reputation: 31

Here, Try this

<select>
    <option selected> Size - </option>
    <option class="disabledoption">Short Option</option>
    <option class="disabledoption">This Is </option>
    <option class="disabledoption">dssdsd Is </option>
    <option class="disabledoption">yes </option>
    <option class=>ertyu </option>
    <option class=>gsdgsdf </option>
</select>

<script type="text/javascript">
jQuery(document).ready(function() {
    uni = '\u0336';
    jQuery('.disabledoption', this).each(function(index, element) {
        uni = '\u0336';
        var result = strikeString(jQuery(this).html(), uni);
        jQuery(this).html(result);
    });
    });
    function strikeString(str, strikeKind) {
        var result = '';
        for (var i = 0; i < str.length; i++) {
            var c = str.charAt(i);
            var r = c+strikeKind;
            result += r;
        }
    return result;
}
</script>

Upvotes: -3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201866

Generally, option elements have many limitations in styling, since their rendering is still largely based on built-in routines in systems, and those routines are often not controllable with CSS. Overstriking does not usually work, as you can test with a simple static example <select><option style="text-decoration: line-through">Hello world</select>. (As a curiosity, Firefox uses line through, but not on the initially selected option in the initial state.)

Consider using an alternative approach. If an option cannot be selected, why not just remove it? (I mean deleting the element with JavaScript. Hiding it with CSS does not work well.)

Alternatively, set its disabled property to true. This will prevent it from being selected, and it will get displayed using gray text, on popular browsers.

Upvotes: 2

the mad zergling
the mad zergling

Reputation: 282

Here, try this: 

<p>Bla bla bla <span class="strike">RAAAAAA!</span></p>

and: ​

span.strike{
    position: relative;
    text-align: center;
    z-index: 1;    
}

span.strike:before {
    border-top: 1px solid #000;
    content:"";
    width: 100%;
    position: absolute;
    top: 50%; 
    z-index: -1;
}

edit: oh its a select. nevermind.

Upvotes: -1

UrbanDude
UrbanDude

Reputation: 436

There very few options for styling select elements. Here's a support grid that shows your available options (and limitations).

You would probably be better off simulating the 'select' some other way (example), rather than trying to style a select form control using CSS.

Upvotes: 2

Travis
Travis

Reputation: 124

You could get tricky and add a one pixel background to the text div. This would at least be future-proof and work on all browsers.

Upvotes: 0

Related Questions