"Choosing the text within an <a> tag: A step-by

I am dealing with the a tag.

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4c7dbd9d1f4d9d5ddd89ad7dbd9">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d0e1210183d101c1411531e1210">[email protected]</a></a>

I have been struggling to select the text within this tag. When I try, it starts dragging, and even after adding 

-webkit-user-drag: none;

The tag is no longer draggable, but the text remains unselectable.

See my code example here

htmlcsswebkit

Answer №1

The reason for this behavior is that it's a hyperlink. You can select the text inside by clicking outside and dragging into it. However, if you click inside to select, it will immediately activate the link (for example, on my system it opens the mail application.)

If you only want part of the area to be clickable, my recommendation is to wrap it inside a <div>

Check out the demo here

Answer №2

If you remove the padding class in your fiddle, you will be able to still select the text. Consider adding a wrapper div for your anchor tag. You can view an example fiddle by clicking on this link:

<b>  http://jsfiddle.net/ykHH5/12</b>

Answer №3

To prevent dragging, simply set the attribute draggable="false". The rest of the behavior will remain unchanged.

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dba8b4b6be9bb6bab2b7f5b8b4b6">[email protected]</a>" draggable="false"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a7bbb9b194b9b5bdb8fab7bbb9">[email protected]</a></a>

http://jsfiddle.net/ykHH5/14/

Answer №4

I may not be a HTML expert, but I can provide you with the code to achieve your goal:

<div class="block"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01736f6d61416d6169602c616d6f">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d4c8cac2f7cac6cecaffcac8">[email protected]</a></a></div>

a{color: white;}

.block{
    display: inline-block;
    background: black;
    padding: 50px 100px;
    text-decoration: none;
    border-radius:0px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch between light and dark mode on a webpage using HTML

I am looking to create a script using JavaScript, HTML, and CSS that can toggle between dark mode and night mode. Unfortunately, I am unsure of how to proceed with this task. https://i.sstatic.net/xA3Gq.png https://i.sstatic.net/v5vq5.png My goal is to ...

javascripthtmlcssbootstrap-4ejs

Problems with Wordpress AJAX search functionality

I am currently working on implementing a search feature using AJAX to dynamically load posts. However, I am facing an issue where the results are not being displayed. This code snippet was adapted from another source and modified based on private feedback ...

javascriptphphtmlajaxwordpress

Finding the height of a dynamic div in ReactJS when no CSS height is set

I'm encountering an issue when trying to determine the height of a dynamically created div that doesn't have a defined CSS height property. I'm working with React JS and have attempted to use jQuery, pure JavaScript, and React tools to acces ...

htmlreactjsheight

Retrieve the value of data from the dataset

I'm facing an issue assigning a string value to a variable depending on a boolean variable. After trying the following code: [Vue warn]: Error in data(): "TypeError: Cannot read property 'check' of undefined" TypeError: Cannot read proper ...

htmlvue.jsvue-componentvuetify.js

Custom Sizing for Bootstrap Modals

I need assistance with creating a dynamic bootstrap modal that adjusts its width based on the content and includes a vertical scrollbar when needed. Although the vertical scrollbar is functioning correctly, the horizontal width appears to be static. C ...

csstwitter-bootstrap

"Selecting elements with CSS using the 'element'

While exploring some websites for studying purposes, I came across this code snippet. .site-header .widget-area span.but As a beginner in CSS, I'm curious to know more about the span.but part. Is it similar to the :not pseudo selector? ...

csscss-selectors

Embracing Blackberry WebWorks for Enhanced HTML5 Support

Can someone assist me with this question? I am wondering if my Blackberry Bold 9700 (5.0.0.469) is capable of supporting HTML5 for audio streams. Thank you in advance. ...

htmlblackberryaudiostream

Contrasts in Bootstrap 5.3 color schemes between development and live environments

Currently in the process of building a website using Astro [^2.2.1], Bootstrap [5.3.0-alpha3], and Svelte [^3.58.0]. Most components are functioning correctly, except for some elements like buttons where the foreground and background colors seem off. I&apo ...

csssassbootstrap-5astrojs

Is there a way to use HTML and JS to draw custom lines connecting elements?

Sorry if this question has been asked before. Is there a way to create straight lines connecting HTML elements with just HTML and JavaScript, without relying on SVG or Canvas? If so, what would be the most effective approach? ...

javascripthtml

Having trouble establishing a connection between the client and server while using Node.js with socket.io, Express, and an HTML file

While following a tutorial on YouTube for creating a simple web game with lobbies/rooms, I encountered an issue. When attempting to establish a connection between the client and server, the expected "a user connected" text did not show up in the console as ...

javascripthtmlnode.jsexpresssocket.io

Python web scraper unable to locate specified Xpath

My question was previously posted here: Xpath pulling number in table but nothing after next span In testing, I successfully located the desired number using an XPath checker plugin in Firefox. The extracted results are displayed below. Although the XPa ...

pythonhtmlseleniumxpathselenium-webdriver

Sharing $scope Data Between Controller and Directive in AngularJS

Recently, I created a straightforward directive that displays an object: var app = angular.module("myApp", []); app.controller('myCtrl', function($scope) { $scope.users=[ {name:'davidi',age:'23'}, {name:'karen ...

javascripthtmlangularjsangularjs-directive

The function for clicking is malfunctioning

I've been working with a table where I can dynamically add rows using the clone function, as shown below: new_row = $(table_id+' tbody > tr:last').clone(true).removeAttr('id').insertAfter(table_id+' tbody > tr:last&apos ...

jqueryhtmlclickonclick

Missing dots on owl carousel

Currently, I am working on a project that involves using the owlcarousel library in javascript. Everything was running smoothly until I encountered an issue. Although I have set the dots to true in the code, they are not appearing on the carousel. Below i ...

javascriptcssowl-carousel

Utilize CSS to style active buttons with JavaScript

In an HTML document, the dynamic generation of divs and buttons using JavaScript can be seen in the code snippet below. <div style="background: rgb(247, 247, 247);"> <button class ="xyz" disabled="disabled">Button1</button> </div> ...

jquerycssbuttonapply

SliderToggle and Div implementation in Internet Explorer (IE) using jQuery

I'm encountering an issue with jQuery's slideToggle function and a div specifically in IE. Here is the code snippet causing the problem: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d ...

jquerycssinternet-explorer

Is there an issue with hover not working for MUI styled component when focused?

Having trouble getting both focus and hover effects to work on the same MUI styled component in React. Check out this code sandbox for a demonstration. When clicking on the Select element, the background and border colors do not change: https://i.sstatic. ...

cssmaterial-ui

CSS - selecting elements that are greater than a specific criteria N

I have multiple <p> tags in the body of my HTML. I want to display only the first two paragraphs and hide all the paragraphs that come after. However, the code I'm using doesn't seem to work as expected. <html> <head> < ...

htmlcsscss-selectors

Tips for utilizing FixedHeaderTable - Basic instructions required

After doing extensive research, I stumbled upon this plugin called Fixed Header Tables. Despite following the instructions provided on the main website, I couldn't get it to work. I was aiming to create a table with a fixed top row and left column fu ...

jqueryhtmlcsshtml-tablefixed-header-tables

Leverage the power of HTML, CSS, and Bootstrap within Visual Studio 2022 when developing with

Could someone help me figure out how to implement HTML, CSS, and JavaScript design in Visual Studio 2022 while utilizing ASP.NET controls for coding purposes? I am encountering difficulties in starting my work on a website project. Any assistance would be ...

htmlcssasp.netbootstrap-5visual-studio-2022