How to Scale the font when Selected?

Question

How to Scale (increase) the size of the selected Text.
I know to change the default selected color by adding

::-moz-selection {
       background-color: #0092BF;
       color: #FFF;
}
::selection {
       background-color: #0092BF;
       color: #FFF;
}

How to increase or decrease the size of the selected text Only.??? Selection

i am getting the above, i Want to achieve the below **Edited using image editor*

Increased

Have you tried using `font-size`? – zneak Jul 11 '12 at 17:45 — zneak, Jul 11 '12 at 17:45
Yes, i used font-size & font-weight too – VenomVendor Jul 11 '12 at 17:47 — VenomVendor, Jul 11 '12 at 17:47

score 1 · Answer 1 · edited May 23 '17 at 11:55

1

You can't do this strictly with CSS as it's not included in the spec. The spec only allows you to change some basic properties such as color, background-color, outline and cursor. Reference: http://www.w3schools.com/cssref/sel_selection.asp

You could, however use a jQuery/javascript workaround the add styling to the selected text. Here's another question that has a jQuery based approach to the problem. jQuery How do i apply CSS to selected text

edited May 23 '17 at 11:55

Community

1
1

answered Jul 11 '12 at 18:00

Ashray Baruah

1,585
11
7

I understand that, the above pointing links gives me something i want to achieve, But not the one I want exactly. when i select some text on my page, the selected size should increase without performing any other action. – VenomVendor Jul 11 '12 at 18:17
You can't increase the size without using javascript. That's what the above link says. You just can't do it using only CSS. – Ashray Baruah Jul 12 '12 at 23:10

score 1 · Accepted Answer · answered Jul 11 '12 at 21:42

As others have stated, this cannot be done purely through CSS. However, here's a JavaScript solution. This assumes you're using jquery 1.4.1+ (probably works with many versions, but this is the one I tested with).

This is a bit clunky, but it will allow you to apply a style to text selected by mouse input only while it is selected. A quick explanation of the functions:

reset() removes the styling from any existing selections and gets rid of the extra spans
highlight() wraps the selection in a new span node and applies the style
getSelected() just returns the selection object. Note that reset() does nothing if you right-click; this is to allow the right-click menu to appear. If you right-click outside of your selection, you won't get the results you're looking for, but that can probably be fixed.

Let me know if you want more detail. Sorry for the huge code block.

<script type="text/javascript">
    $(document).ready(function () {
        $(document).mousedown(reset);
        $(document).mouseup(highlight);
    });

    reset = function (e) {
        var st = getSelected();
        if (st != '') {
            if (e.which != 3) {
                $("span").contents().unwrap();
            }
        }
    };

    highlight = function () {
        var st = getSelected();
        if (st != '') {
            var newNode = document.createElement("span");
            newNode.setAttribute("class", "selectionClass");
            var range = st.getRangeAt(0);
            range.surroundContents(newNode);
            st.selectAllChildren(newNode);
        }
    };

    getSelected = function () {
        var selection = '';
        if (window.getSelection) {
            selection = window.getSelection();
        } else if (document.getSelection) {
            selection = document.getSelection();
        } else if (document.selection) {
            selection = document.selection.createRange().text;
        }
        return selection;
    };
</script>

I don't want any Right Click happening, as far as I know, my need cannot be achieved by CSS, But your solution doesn't relate my Question in anyway, please read my Question again. — VenomVendor, Jul 11 '12 at 23:06
Your question is that you want to increase the size of the selected text, right? I assume you mean increase the size only while it is selected, and it should go back to normal when deselected. Is this correct? If so, that's what this code does, by applying a style (which, I should mention, would have a higher font-size) to text that is selected. If you're not worried about allowing users to right-click, you can take out the if (e.which != 3) bit. Otherwise, it's all the same. — Michael Lewis, Jul 12 '12 at 02:37
Also, I can set up a jsfiddle tomorrow to illustrate. If the behavior produced by this code isn't what you're looking for, then I misunderstand the question. — Michael Lewis, Jul 12 '12 at 02:43
Alright, try this: http://jsfiddle.net/MikeBigtime/FcWCj/ and let me know if this is not the behavior you're looking for. I've tested in IE9, FF and Chrome. If you want the highlighting and size changes to stay, even when the user clicks elsewhere or selects other text, that can be achieved with a few modifications. — Michael Lewis, Jul 12 '12 at 13:24
Exactly the same by 99%, Now it's like the user selects the text & later the action is happening. Can you modify this a little bit so that, as the user starts selecting, the actions occurs... This is Cool .. — VenomVendor, Jul 12 '12 at 15:10
Awesome! I'll play with the code and see if I can make it happen in real-time as the user selects. I tried using a setInterval(), but it wasn't working. If I can get it working, I'll post it up here. — Michael Lewis, Jul 12 '12 at 15:32

score 0 · Answer 3 · edited May 23 '17 at 10:30

0

You cannot use more than color, background and background-color in the ::selection css selector, see the documentation on ::selection here.

You could get the selected text via jQuery and reinsert it using regexp and a span wrapper, but maybe thats too much trouble for some unusual visual effect.

edited May 23 '17 at 10:30

Community

1
1

answered Jul 11 '12 at 18:00

Beat Richartz

9,474
1
33
50

How to Scale the font when Selected?

3 Answers3