CSS3 - Let Your Users Know They Can Use [CTRL]+[A] To Select The Code In PRE and CODE elements

Posted at

PRE, CODE and essentially every element having the contentEditable="true" attribute is made 100% well.. editable,
which is very useful if you want to have "textarea like" qualities such as pressing [CTRL]+[A] to select all of the code in those elements (mostly for copy&paste).

But, since this is not the default behaviour, there is a need to inform your users of the UI quality, usually in this case you can use the title attribute (but it requires setting text for each element), in this case a CSS only solution, either TEXT or an IMAGE will work wonderfully with our requirements.

icompile-eladkarako-com_inform_your_users_of_ctrl_a_option_in_contenteditable_true_containers-png



Here is the CSS code including the image

/*have a tooltip saying "[CTRL]+[A] friendly"*/
[contentEditable="true"]:hover:before {
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAABACAYAAAAK9hkwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPuSURBVHhe7VyxruowDL3zXVhhfxPfgATiC9iZGHlsTMwMSHwBAzsMzHwAEys7H8DExsTSJ/cSFHLtxGmbtK91pEqUJrZzju24kZqvL2mCgCBgQWC5XCaDwUCugjCYzWYJ2+F2ux10Tq/5fJ4sFgu5CsCg3W6nmDrJOBwOacfVapVIKx6B4/HIIiL1emnhEFBEoKkJwG+1Wm/t33/+JnLlxwCjE7DudDq/1wjI/71eT0go2PkwEtbrtVp3PwNCSMjv9VjmEBIK9uos6VlIEBLChHcWbyxzjESCRIJEAkRgkEgwhZqhTj2nXn8oQ6G/ku3SicnImoK49ueZd+4SVRlpK8d08Mzf+ngMaBN46p4C2WafIstGEGd+ut0UGZQDwdhgJGDGmyDrHmsCYo533ccmwXQeigjKbj3CopLAiRau57s8nBsxNi82nUS3v1Ek6B5DgeCbTqj1CCOEIrtRJFDeWGYk5CERGxssHWHgZfU0SpYpz0c+Vixw0yW13nH0RyfBLBWzlnG2ysKclKs6wZ77pDNMn82GUhdm28RiPuOmrazVlWsuUUnIO1nXZHyfuyKEKy+rHGpckHTEnYz0+9m2ERL+9w08W1kmz/IhwC5R86mR0TYEhISA/jGdThN17ff792/4D+5VExICkqCLNoHXnwkJQkIkBCqgRiJBSKgAAhUwoZRIML9l8MVBjfcd59Nft1GNy2s3pT86CTEA9AHb1peyteg5RCPB9iUP5mnwnzlZjidSfSj9Jgm6Th8SML1YNGGkRyPBBJryQNNwuLcBpT+jSKN02/rbAOSSw42YypKQJ024oiELKTayMXlcAmBsLUlwRVkoElQKxVKpzalqT4KeznzSVZZ0pIOPpdHSqyPfhRkLZ87i6kpFGCkUUTabbUUCJxXJBl5RNSwih0OAj3rrBl6/3/eRVfu+WNQUMWmShM1mk37MJi08AqPRKBkOh+QX/gl8ZystHAK32y119teH+78/Z55MJmmH6/UazooGS348Hgkcr/A6YoE+6gK+ZQYi4ICR8/mcXC4XrwvDGEj1lVO3/tvt9n1mCOugEVg4fEo5135KVll1G+c8XITFjqUTnA4DoD2fz49gAI+G//PKl/EMBCgSIAyFBAaARXSB43mw1/rxeJxASVaEDpHhQECBbS7MsMi/FiXBMDQCEAVQUenNerZPaIOaKB9IOJ1OHyR0u11JRbGcQS3K8DKiGrxjvM7Si2VG4/V8vGXD2UlCQFyfSE84VI3cIYxrU3O0qb0mlYagTIUIeB3r2RwgypqpegmD3H+/39XWLL07WJahddWL7enUda6VnJciIPhmVCVnL0YJAoJAOAT+ARGg50ELYydsAAAAAElFTkSuQmCC");
width: 97px;
height: 64px;

top: 80px;
right: 5px;

display: block;
position: absolute;
opacity: .7;
}


here is the raw Paint.NET image (with saperate layers, you can edit).


here is the PNG I'm using in this version: icompile-eladkarako-com_inform_your_users_of_ctrl_a_option_in_contenteditable_true_containers_png_32bit-png (Click To Download)


*and of course - you can just use a plain-text instead of an image.

*also- you can add pointer-events:none (and also touch-action:none) to prevent from the focus to switch to the toolkit image (focus-stealing), this way any click "inside the image" will simply have the focus stay in the host container under same z-index (meaning the one having the contentEditable attribute),
this is a very simple, yet efficient and high-performance non-javascript solution :)

/*have a tooltip saying "[CTRL]+[A] friendly" on all containers with contentEditable="true" attribute*/
[contentEditable="true"]:hover:before {
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAABACAYAAAAK9hkwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPuSURBVHhe7VyxruowDL3zXVhhfxPfgATiC9iZGHlsTMwMSHwBAzsMzHwAEys7H8DExsTSJ/cSFHLtxGmbtK91pEqUJrZzju24kZqvL2mCgCBgQWC5XCaDwUCugjCYzWYJ2+F2ux10Tq/5fJ4sFgu5CsCg3W6nmDrJOBwOacfVapVIKx6B4/HIIiL1emnhEFBEoKkJwG+1Wm/t33/+JnLlxwCjE7DudDq/1wjI/71eT0go2PkwEtbrtVp3PwNCSMjv9VjmEBIK9uos6VlIEBLChHcWbyxzjESCRIJEAkRgkEgwhZqhTj2nXn8oQ6G/ku3SicnImoK49ueZd+4SVRlpK8d08Mzf+ngMaBN46p4C2WafIstGEGd+ut0UGZQDwdhgJGDGmyDrHmsCYo533ccmwXQeigjKbj3CopLAiRau57s8nBsxNi82nUS3v1Ek6B5DgeCbTqj1CCOEIrtRJFDeWGYk5CERGxssHWHgZfU0SpYpz0c+Vixw0yW13nH0RyfBLBWzlnG2ysKclKs6wZ77pDNMn82GUhdm28RiPuOmrazVlWsuUUnIO1nXZHyfuyKEKy+rHGpckHTEnYz0+9m2ERL+9w08W1kmz/IhwC5R86mR0TYEhISA/jGdThN17ff792/4D+5VExICkqCLNoHXnwkJQkIkBCqgRiJBSKgAAhUwoZRIML9l8MVBjfcd59Nft1GNy2s3pT86CTEA9AHb1peyteg5RCPB9iUP5mnwnzlZjidSfSj9Jgm6Th8SML1YNGGkRyPBBJryQNNwuLcBpT+jSKN02/rbAOSSw42YypKQJ024oiELKTayMXlcAmBsLUlwRVkoElQKxVKpzalqT4KeznzSVZZ0pIOPpdHSqyPfhRkLZ87i6kpFGCkUUTabbUUCJxXJBl5RNSwih0OAj3rrBl6/3/eRVfu+WNQUMWmShM1mk37MJi08AqPRKBkOh+QX/gl8ZystHAK32y119teH+78/Z55MJmmH6/UazooGS348Hgkcr/A6YoE+6gK+ZQYi4ICR8/mcXC4XrwvDGEj1lVO3/tvt9n1mCOugEVg4fEo5135KVll1G+c8XITFjqUTnA4DoD2fz49gAI+G//PKl/EMBCgSIAyFBAaARXSB43mw1/rxeJxASVaEDpHhQECBbS7MsMi/FiXBMDQCEAVQUenNerZPaIOaKB9IOJ1OHyR0u11JRbGcQS3K8DKiGrxjvM7Si2VG4/V8vGXD2UlCQFyfSE84VI3cIYxrU3O0qb0mlYagTIUIeB3r2RwgypqpegmD3H+/39XWLL07WJahddWL7enUda6VnJciIPhmVCVnL0YJAoJAOAT+ARGg50ELYydsAAAAAElFTkSuQmCC");
width: 97px;
height: 64px;

position: absolute;
display: block;
opacity: .7;

top: 80px;
right: 5px;

/*prevent focus-stealing*/
pointer-events: none;
touch-action: none;
}


note you can mark-out the top definition, in-case you'll find it buggy or something..




Saving some bytes by using a lower-color setting GIF image,
in this version I use a 4-colors palette GIF, also it is interlaced (showing lower quality faster and improve as file loads), it still looks ok'ish: icompile-eladkarako-com_inform_your_users_of_ctrl_a_option_in_contenteditable_true_containers_gif_4colors_interlaced-gif (Click To Download)

to switch to this version use this value in the image, instead of the original one:
"data:image/gif;base64,R0lGODlhYQBAAJEAAAwMDP39/RsxbWMAbyH5BAkAAAMALAAAAABhAEAAQAL+nI+py+0PIxMgBIGz3rz7D4aiZpUUQlmcmrHC9b4XzNbweredK/ckXboAUJXc6IhMKlvB0yEVjEqn1Kr1iq1iok4D9AooBsNTcskcKJrXlbA4/YbHuTLTUEFx6/dxvv8PGCg46CYgwSDWdbjI2DgBUJclOUlZOUVhSMSzxNnpyXXnVYSzUfNz6uOSsxlDunXDY2OnaVlre+uhEjrwReVn4QYHHDxGzFcsfCamJ3cZKUR7Kz19G+Y4gJaWec3d7bjnHS4ekUdofo6ezredAOX5Dp8EShtfb7/TtOteasIkayLl1aYmIwgSFAhk1pNR/FC5QgjLCBN/B328snjxmaL+fQ7v5ZL48cg/aAupmTwpaeMclCxxadS3sgwxK9lqGZs5CaLKLDWTRcl2LBmbYciU+Qz4MlrLpTItKeIVk6lUStau9Xo6LqvWA2+qbv06zh0ksGTLmj2LNu3ZPB7b2gvDjuuzqXRz7oLKyq1eJPNKgtwLGERfUXkDG8ahkPDfw4yT+n2YkUYPIJH/sgI58HJCXfQaTsSHykbIUqAnZtYJU3PHjipUWZaIOSKdyonxwr69qp9BKqtbeW5ycORO3IvrVRTc76Pw1MUbBx5su650SsOnW6cDvdf166iVbrfe3S+YqFKBkuftWPF4KcG6uicqVE0b80V7Lvfua459+j9Y5cPnf8ZR2OWDX397DDNTUHLIxyBRghiFFCnMfUfNgdTdBQmFGp4RFzYZbgieV45od5daJi7Qi4gnrojAhySxCKN6acRI44dY0agWFHDhyOKOPP4IpFkFAAA7"


Save 12 to-16 bytes more, by not using the interlaced quality of the GIF
icompile-eladkarako-com_inform_your_users_of_ctrl_a_option_in_contenteditable_true_containers_gif_4colors_no_interlaced-gif (Click To Download)

to use this version replace the current base64-image-text you are using with this one:
"data:image/gif;base64,R0lGODlhYQBAAJEAAAwMDP39/RsxbQAAACH5BAkAAAMALAAAAABhAEAAAAL+nI+py+0Po5y02usE2Lz7D4biSJaekG3CyrbuC8fyTNeuumhCwPf+DwwKh8SiMahTAHbHpvMJLWoSGp7tis1qYb/poRrYisfkVheAAJfXbNs5DbC253TW+xsP1/fsu0HNFzjmNwAoeIhFaIjIOKOY9+Jj1rMCxCR5qWdH6caJWekpiYYnN+kipxdmlcoKGlNqx6UJOuuaGTb6B3k6W5rKtGOLWrsZKWsKC3zrpZusbBvZ2/rMaxyNXDtMmVu4a1p8vMlJ/X0Le66azboN54z+Kv3sDB17Tfup/OiuXlmePx0MnJlw8uIt47aIHq1J2tZZElivWqaJwkS1IzYvUEb+ezUa4roYbWMbfI7GyfLIrJvIRo30EWMJ8+DFKDRr2hySEszNnTyj5MzTM2hQeD+FGhV67yOpo0xvJi3aNKpPmUulWj3yFCHQq1yFZJ1ZpIORDTs58BAL5WtVImS79mh7dmsTtc3Yfogbpy3at2YD3OXrdytcsX27UK0bVm7gvD7gBo4L+fHjwpIjO8bkMjGQy5Hx9tWbB3RjwXkVh2K3dghnzpVbWw4Ne/SP0jgPqxyrmLXjwa8hU75M+WFmISA8A/27GLZy3yMAP7ym1W1T1lKiSxfqIa3169w3cxuwpLv4tyjAjpe+YYGK8241fIdjYraJ+fTrgyiP4fbb/PxM+/fXqZR/Ag4IAYDpEYhgggjshp+CDgoYnhXvPUjhBaRViCEGBmbIYQVApdRhiA1ECKKIJoK0xIkqXoTDiit64GKMLcZIY4023lhhAQA7"