How to make certain text not selectable with CSS [duplicate]
Tags: css
Problem :
This question already has an answer here:
The header for my page has some centered text, but I do not want the user to be able to select it. Is there a way to do this with CSS?
Solution :
The CSS below stops users from being able to select text.
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
To target IE9 downwards and Opera the html attribute unselectable must be used instead:
<p unselectable="on">Test Text</p>
CSS Howto..
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating). When you enter text into a floated div the div will...
Remove the first slash, the img folder is in the same folder as styles.css: background: url("img/logo.png") no-repeat; ...
Using border-image: We can make use of the border-image to assign a linear-gradient as the border image on all the four sides. We would need a pseudo-element (overlapping the parent...
You could wrap your custom nav CSS in a media query.. @media (min-width: 768px) { /*-- targeted li a tag --*/ .nav > li > a { padding: 50px 20px...
I feel your pain! We also have clients who give us abstracts which are too long for the allotted area; for some clients, it apparently doesn't even cross their mind...
left -9999em and auto cannot take a transitions . auto is not a number. You can avoid this using pointer-events and drop the left coordonates:https://jsfiddle.net/ornbovv7/3/ nav.main-menu ul li ul {...
You absolutely can do this with just HTML and CSS...using labels to check alternate radio input elements, the checked state of which is then use to determine the adjacent div...
You can do it, if you had fixed size of image_container: .image_container{ width:200px; height:100px; overflow:hidden; } .image_container img{width:200px;} This will scale image by width and hide by height....
For anybody else dealing with this problem -- I used the Device Theme Switcher WP plugin: https://github.com/jamesmehorter/device-theme-switcher/. The plugin allows you to define separate themes for handhelds and tablets and...
When "zooming out" in a browser, the browser attempts to compensate for border. You've set your border to 1px, but at 50% zoom, the border is actually rendered with a...
Wrap both your input and your span inside a container, position this container as relative, and the span as absolute. You can now do whatever you like with the span....
You could add some padding-right into your div to nudge the content out a bit.
Just add this style="writing-mode: tb; glyph-orientation-vertical: 180;" to text I hope this is what you wanted : <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"...
CSS can't change the position of the baseline. It is where it is, based on the font. I would love to do this by trial an error but this needs...
refering to import .css file into .less file in your main.less: @import (css) "bootstrap_theme.css"; ...
Good example of CSS hovers. Refer to the zoom & pan section: "Zoom and Pan" Check this and this link /*GROW*/ .grow img { height: 300px; width: 300px; -webkit-transition: all...
To extend the nested classes (:before and :after in this case), you need to use the all directive when extending like below: &:extend(.btn all); LESS Code: (Some extra lines commented...
* is CSS selector for all elements. But remember you should use ::before, and ::after. This: div::before, div::after{ content: "text"; } create two pseudo elements in every div. Like this:...
As Bootstrap Documentation says, sometimes you will need to place your dropdown container in a different position, for those cases you need to add the dropdown-menu-right class like so: <div...
Sounds like you do want a fixed position, but I'm pretty sure you don't need the margins. To be clear, position: fixed; will position an element with the window (whereas...
A key concept for building responsive layouts is Absolute Positioning Inside Relative Positioning. Chris Coyier has a great article here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/. This concept allows you to position items absolutely inside...
In the fiddle, you can inspect the input box (where you click to enter text) and watch the HTML change when you click on and off. If you don't see...
Set container's (#content) width css property to 100%. JSFiddle...
at the first look, i believe you need to clear the floats you are using. <div style="clear:both"> <div style="float:right;"></div> <div style="float:left;"></div> </div> <div style="clear:both"> <div style="float:right;"></div> <div style="float:left;"></div>...
You are possibly overriding the width of the col-lg-4 divs, depending on when your box css is loaded. Try <div id="box1" class="col-lg-4"> <div class="box"> <img src="images/1.png" style="" class="num-img"> <a href="Search.jsp"...
With a little change to HTML and You can simplify your code in one function for Accept and Reject. See below, Note: Added content class to all container elements with...
use higher specificity #inchannel li.ichn0{ width:179px; height:123px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-size:17px; color:#999999; background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%; } ...
You can do something like this: function appendPara(e) { if (e.keyCode == 13) { //13 is javascript key-code for Enter ..... idContent.document.body.appendChild(m); } } ...
The reason your selector isn't working is because the li elements are not direct children of the #page-container element. Either remove the child combinator, >, or you could change it...
If you want to avoid repainting and move the animation to GPU then you could use 3D transforms to produce the effect instead of animating the width. As mentioned in...