What is the best way to choose all text within a code box without highlighting the entire webpage?

I developed a CSS code specifically for my blogspot site to organize and store all of my code and technical snippets.

.code {
    background:#dae6ef;
    background-repeat:no-repeat;
    border: solid #5C7B90;
    border-width: 1px 1px 1px 20px;
    color: #000000;
    font: 13px 'Courier New', Courier, monospace;
    line-height: 16px;
    margin: 10px 0 10px 10px;
    max-height: 200px;
    min-height: 16px;
    overflow-y: auto;
    padding: 10px 5px 5px;
    width: 90%;
}

 .code:hover {
    background-repeat:no-repeat;
}

When attempting to select text within the code box on my webpage, it currently selects all text on the page instead.

This is how it looks currently: https://i.stack.imgur.com/lldmt.png

What I actually want is for it to only select the content within the code box when I press CTRL + A.

Here's what I'm aiming for: https://i.stack.imgur.com/n5TrD.png

Can this be achieved through CSS? Keep in mind that I have no formal background in CSS; I simply found this code online.

htmlcss

Answer №1

Opt for utilizing input fields when presenting text content. This way, pressing [CTRL] + [a] will solely highlight the text within the input field. Additionally, input fields can be customized to match the appearance of your text.

Answer №2

To make a div editable, all you need to do is add the attribute contenteditable="true" in your HTML code. It's as simple as that!

If you're looking for more information on editing content with Ctrl-A (Select All) while retaining child elements, check out this related question on Stack Overflow: Edit contenteditable text with Ctrl-A (Select All) removing all child elements

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

Steps to position an image without a background in the middle of a smaller container:

My HTML includes the following code: <div style="width:400px;height:300px;overflow:hidden;"> <img src="http://d39kbiy71leyho.cloudfront.net/wp-content/uploads/2016/05/09170020/cats-politics-TN.jpg" /> </div> Take a ...

css

Guidelines for sending an array from a Laravel Controller through AJAX and generating a button based on the received data

Before making a selection, I click on the Color button: <form class="form form-variant"> {{ csrf_field() }} <button type="submit" class="btn btn-success che ...

javascripthtmlajaxlaravel

Require the capability to bypass inline CSS styling

Currently facing an issue with a wordpress website I am constructing using iThemes Builder. The problem arises when integrating the plugin Jquery Megamenu, as the drop-down menu gets truncated due to an overflow:hidden property that cannot be overridden i ...

jquerycsswordpressbuilder

How to style the videojs chapter menu with CSS to extend the box to the full length of the line

I am currently working on customizing the videojs CSS for the ChapterButton menu in order to make it expand to accommodate varying line lengths without wrapping. Even though I can set it to a fixed width, I require it to be able to adjust to different line ...

cssvideo.js

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

I am currently using the ng-animate module to implement sliding effects for my app views. Each route has its own unique slide animation. Take a look at my simple code below: HTML: <div ng-view ng-animate class="slide"></div> CSS: /*Animatio ...

javascriptcssangularjsslideng-animate

Issue with making a call to retrieve an image from a different directory in ReactJS

This is how it appears <img className='imgclass' src={"../" + require(aLc.value)} alt='' key={aLc.value} /> I am trying to create a path like ../m/b/image.jpg, where aLc.value contains the path /m/b/image.jpg. I need to add only ...

javascripthtmlcssreactjswebpack

When is the appropriate time to nest CSS class selectors within other class selector definitions?

REVISED 1 After receiving feedback, I made the following changes: .lower-container { justify-content: center; position: absolute; width: 92vw; // height: 46vh; <--- no set height /* nested classes for adjusting position and height of low ...

css

What is the best way to position a sidebar alongside content using flexbox?

As a newcomer to web development, I recently attempted to use flexbox for the second time while working on the layout for my website. However, I encountered an issue with trying to float aside next to content. Despite my efforts, it seems to just disappear ...

htmlcssflexbox

The Javascript function will only initiate upon a manual reload of the page

My function is working perfectly, but only after I reload the page once it has been loaded. This function is a timer that starts counting down from 10 to 0 as soon as the page loads (which is the intended behavior). However, when I first land on the page ...

javascripthtmlflow-router

Avoiding text from overflowing a DIV when the parent DIV's width is specified as a percentage

After extensively searching through over 20 similar posts, I have not been able to find a solution that works for my specific issue. The layout of some content I'm working with resembles the example provided here: Check out the Fiddle Example In th ...

cssoverflow

The Android smartphone is experiencing issues with the responsive design not aligning properly on the

I'm encountering difficulties with creating a Viewport that functions properly on an android smartphone. My website is fully responsive, scaling down to 480 pixels wide. At this point, a min-width of 480px is set on the body tag. Initially, my viewp ...

javascriptandroidhtmlviewportmeta-tags

A curated list of Laravel form request validation resources

After researching, I couldn't find any information on how to validate collections in the documentation. In .NET Core, I can easily achieve this by creating a Model with data attributes that automatically bind to the front end model, displaying all err ...

c#phphtmllaravellaravel-blade

Tips for updating the submit button title in HAML

Just getting started with Haml, I have a form that contains two submit buttons. In order to differentiate and handle them in the Controller, each button requires its own unique name. For example, in HAML: = program_form.submit I18n.t('texts.6OA&apos ...

htmlruby-on-railsrubyhaml

`The search bar and search button`

On mobile, I have a search field and a button working fine. However, when typing in something and hitting "search" on the phone's keyboard, it leads to a 404 error. But clicking the "search" button works as expected. I would like to be able to hit "se ...

phphtmlcss

Difficulty Encountered when Using Colorbox in Internet Explorer (all iterations)

I've been struggling to get Colorbox working properly on this particular page, even after spending more time than anticipated. The link to the page has been removed for privacy reasons. There's a Colorbox test link at the bottom right corner tha ...

jqueryinternet-explorercssmodal-dialogcolorbox

Troubleshooting Angular: Issues with Table Data Display and Source Map Error

I'm currently tackling a challenge in my Angular application where I am unable to display data in a table. When I fetch data from a service and assign it to a "rows" variable within the ngOnInit of my component, everything seems to be working fine bas ...

htmlangulartypescriptdebugginghtml-table

I need assistance in making my Gradient design compatible with different browsers

Currently, I am using this Gradient style: background: -moz-linear-gradient(center top , #FFFFFF 0px, #DDDDDD 100%) repeat scroll 0 0 transparent; However, I need a multi-browser compatible version of it. Can anyone help me with that? ...

cssgradient

Exploring the wilderness: Safari with a twist of negative margin

Dealing with two values, "price" and "old price". When displaying the "old price", I need to cross it out with a line that is thinner than the default text-decoration: line-through. Below is the code snippet: HTML: <span class="price"> <span c ...

htmlcsssafarimargintext-decorations

Alignment of Bootstrap responsiveness shifted to the left rather than the center

My HTML Code: <div class="gridrow" id="eventsrow"> <div class="gridcard" id="eventcard" style="float:left;width:100%;height:100%;margin-bottom:0.5rem;background-color:white"> <div class="event container"> <div clas ...

htmlcsstwitter-bootstrap

Determining the orientation of an image in JavaScript

Currently, I am attempting to determine the orientation of images using JavaScript in order to apply a specific class to them. This process seems to be functioning correctly on Firefox, but is presenting challenges on other browsers. It appears to work bet ...

javascriptjqueryhtmlcssbrowser