Unable to highlight text when using the width property in CSS

I'm currently facing a challenge with some CSS code.

I have a button that needs to change its content after being clicked (which it does), and then enable user-select: all.

Here is the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .modal-body {
             // CSS styles here
        }
         // More CSS styles
  
    </style>
</head>
<body>
  // HTML elements 

</body>
</html>

The issue I am facing is that the user-select property is not working as expected. After doing some testing, I found out that removing the width: 100% allows me to select the text. However, this width property is necessary for an animation effect on the button. Any suggestions or fixes for this problem?

javascripthtmljquerycss

Answer №1

The code has executed successfully. Upon clicking the button, the entire title of the button will be selected.

Feel free to test the code snippet below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<Style>
.btn-one::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.5s;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: rgba(255,255,255,0.5);
    border-bottom-color: rgba(255,255,255,0.5);
    transform: scale(0.1, 0.5);
}
</Style>

<title>Login Page - Self Demand</title>
<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>
<body>
<button id ="promoCode" class="btn-one"> test </button>
</body>
<script type="text/javascript">

$('.btn-one').one('click', function(){
    $(this).fadeOut('slow', function(){
        $('#promoCode').text('Stuff to be selected');
        $(this).fadeIn('slow');  
        $(this).css("user-select", "all");
    });
})

</script>
</html>

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

Can you point me in the direction of the Monaco editor autocomplete feature?

While developing PromQL language support for monaco-editor, I discovered that the languages definitions can be found in this repository: https://github.com/microsoft/monaco-languages However, I am struggling to locate where the autocompletion definitions ...

javascripttypescriptmonaco-editor

Steps to include a title next to a progress bar:

Is there a way to achieve something like this? https://i.sstatic.net/dhO2f.jpg I attempted to use bootstrap but I ran into an issue where the title was slightly misaligned below the progress bar. Can someone offer assistance with this matter? Apologies i ...

javascripthtmlcsstwitter-bootstrap-3

indicating the vertical size of a paragraph

Is there a way to set the specific height for the <p> tag? ...

htmlcss

Custom attribute in ReactJS component - I am not defined in my custom attribute in React component

I am currently working with ReactJS and I am facing an issue regarding accessing a custom attribute -name- of my ReactJS component. Despite trying to use e.target.name, it keeps returning "undefined" on my console. I cannot seem to figure out why this is ...

javascriptreactjs

Issue with v-model not connecting to app.js in Laravel and Vue.js framework

Snippet from app.js const app = new Vue({ el: '#app', router, data:{ banana:'' } }); Code found in master.blade.php <div class="wrapper" id="app"> <router-view></router-view> //using Vue ...

javascriptlaravelvue.js

"Enhance Your Website with Stunning HTML5 Video Backgrounds and

I've been tasked with creating a website for my friend, and he's looking for something pretty complex. He wants videos in between the menu points, with the content displayed on the final frame. My idea is to use short 2-second videos as backgroun ...

javascriptjqueryhtmlvideo

Creating a new webpage that automatically populates with multiple images from a server using PHP

I'm inquiring about generating a webpage automatically from an HTML template, How can I create a new webpage from an HTML template and display multiple images from the server on the generated page? Please review my code below, Thank You. The follo ...

phphtml

function for selecting colors that is functioning in reverse

I have encountered a small issue with my function. Currently, it only applies the selected color when clicking on the color picker itself, but I would like to change it so that the functionality works slightly differently. Here's what I want to achie ...

javascriptjquery

Is it possible to remove the "getContext" property from the HTML5 Canvas element using a script?

Visit the HTML5 conformance test suite to find a test for the prototype of HTMLCanvasElement. While this test fails for Safari and Firefox, it passes for Opera on Windows 7. The script within the test attempts to delete the getContext property of HTMLCan ...

javascripthtmlcanvashtml5-canvas

Unable to achieve autofocus functionality with the Directive feature on Firefox browser

I created a custom directive that wasn't functioning properly on Firefox version 36.00. It's supposed to work similarly to the autofocus attribute in HTML 5. Here is the directive code: app.directive('autoFocus', function($timeout) { ...

javascriptangularjs

Are there any APIs available for accessing call logs from another app using Android?

Currently, I am in the process of developing an Android Child Monitoring application. My goal is to access the call logs from one app and transfer them to another app. Are there any relevant APIs that can assist with this task? Alternatively, do you have ...

phpandroidhtml

Having difficulty centering an image in HTML?

I've been struggling to get the image (logo) centered on the top bar! I've tried using align-self: center;, display:block;, but nothing seems to work. It feels like I'm missing something here! Click here for the codesandbox link to view the ...

htmlcss

A method for calculating the average of values with identical keys within an object contained in an array

I have a JSON object that contains countries and data values. I need to add up the values of each country and compute their average. Here is the JSON object: var arraySeries = [{"country":"United States","data":2}, {"country":"Venezuela ...

javascriptjsonhighcharts

Transforming intricate JSON data into a structured table format

I'm struggling to transform the nested JSON data into an HTML table, but I keep encountering an error. I'm uncertain about where I may have made a mistake. Could it be related to how I am trying to access the array within the object? Here' ...

javascriptjson

Struggling to loop through an array and persist data in mongoose. Could it be a problem with the

Currently, I am in the process of learning node, express, mongo, and JavaScript. I am working on a feature that involves using rssparser to retrieve a list of stories and then saving them to a mongo database with mongoose. The RSS pull functionality is wo ...

javascriptnode.jsmongodbexpressmongoose

Implementation of async operations using while loop in Node.js

I'm facing an issue with my code snippet. Here's what it looks like: Rating.find({user: b}, function(err,rating) { var covariance=0; var standardU=0; var standardV=0; while (rating.length>0){ conso ...

javascriptnode.jsasynchronoussynchronous

Strange button functionality observed in Internet Explorer 8

If you're using IE8, simply press F12, select the browser mode and document mode to IE8. Next, navigate to any webpage that contains a button with an image overlay. Click on the button and observe how the image moves slightly to the left (-1px) and u ...

cssinternet-explorer-8

What if I am interested in developing a directive that specifically targets custom elements and attributes?

Suppose I want to create a directive that only matches elements with the attribute amInput[type=dropdown]. How can this be achieved? One possible approach is: .directive('amInput',function () { return { restrict: "E", ...

javascriptangularjsdirective

Tips for implementing code to function across several images in HTML and CSS

Hey there, I'm currently working on a website project for my friend and I sometimes refer to www.w3schools.com for help with coding. I'm having trouble implementing a gallery feature where users can click on images to view them fullscreen. I foun ...

javascripthtmlcss

Styling elements with CSS

I've been attempting to align a button to the right of another button. The example above illustrates what I'm trying to achieve. I used Bootstrap to build it, which has a useful navbar feature for layout. However, despite my efforts to use right ...

javascripthtmlcss