Adjusting the box sizing of a contentEditable DIV to conceal the first and last characters

I am having trouble with a ContentEditable div that requires the hiding of characters, specifically the first and last character. I need to overlay a layer on top of the "#" character to make it appear as if the character and the border line beneath it are not present.

For example: 

<div contentEditable="true"># HI CONTENT! #</div>
is the actual HTML code, but the browser should only display HI CONTENT!. The "#" character should seamlessly blend into the background on both sides. I have tried using box-sizing: border-box, but this seems to increase the size of the div on each side.

The desired outcome is to have the "#" characters inside a red background (in this case, but it should match the parent background which is white).

div {
  display: inline-block;
  border-bottom-style: groove;
  box-sizing: border-box;
  border-right: 20px solid #f00;
  border-left: 20px solid #f00;
}
<div contentEditable="true"># HI CONTENT! #</div>

I would greatly appreciate any assistance. Thank you.

htmlcsscontenteditable

Answer №1

If you want to achieve the desired outcome in a unique way, consider utilizing the :before and :after selectors:

div {
  position: relative;
  display: inline-block;
  border-bottom-style: groove;
  box-sizing: border-box;
}

div:before {
  content: "";
  position: absolute;
  left: 0;
  width: 10px; /* adjust based on your requirements */
  height: 100%;
  background: #f00;
  opacity: .5; /* visibility adjustment */
}

div:after {
  content: "";
  position: absolute;
  right: 0;
  width: 10px;
  height: 100%;
  background: #f00;
  opacity: .5;
}
<div contentEditable="true"># ADD YOUR CONTENT HERE! #</div>

Answer №2

If you're facing an issue, try utilizing the ::before and ::after selectors with a white background to position them above the "#".

Alternatively, you could incorporate a sub-span in this manner:

<div contentEditable="true"><span># INSERT CONTENT HERE! #<span></div>

For styling in your CSS:

[contentEditable=true] {
    overflow: hidden;
    white-space: nowrap;
}
[contentEditable=true] span {
    margin: 0 -11px;
}

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

Looking for ways to locate encoded HTML values in chrome?

Referenced from Microsoft Docs In MVC, the Razor engine automatically encodes all output coming from variables. For example, consider the following razor view: @{ var untrustedInput = "<"123">"; } @untrustedInput In this scenario, ...

htmlasp.net-coregoogle-chromexsshtml-encode

As a newcomer to Javascript, I am currently working on developing a CRUD-based application and could use some assistance with implementing the Edit functionality

I am currently in the process of developing a Javascript CRUD application that showcases data within an HTML Table. I have successfully implemented the Create, Read, and Delete functions. However, for the Edit function, I am looking to display the data in ...

javascripthtmlarraysjsoncrud

How can I make my image shine when the mouse hovers over

I have recently come across a fascinating effect where an image glows up when the mouse hovers over it. This is not your typical border glow, but rather a unique enhancement of colors within the image itself. I discovered a library called Pixastic that can ...

jqueryhtmlcssstylesheetpixastic

I am just beginning my coding journey and could use some assistance with resolving this dilemma. I have included a photo for reference. I am struggling to add some space after the final card

click here for image description Can someone assist me in creating some space following the final card? ...

htmlcssresponsive-design

Transferring mouse events from iframes to the parent document

Currently, I have a situation where my iframe is positioned over the entire HTML document. However, I am in need of finding a way to pass clicks and hover events from the iframe back to the main hosting document. Are there any potential solutions or alter ...

javascripthtmliframedom-events

Having Trouble with the Spacing Between Navbar and Page Content in Bootstrap?

Let's tackle the issue at hand: Here is the code snippet. A lot of it has been borrowed from examples and tutorials. <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <!-- Brand a ...

htmlcsstwitter-bootstrap

An HTML document may display a segment of a URL

Is there a way to display part of a URL in an HTML document, so that if the URL changes, the corresponding content in the body also updates? For instance, www.example.com/?key=i - Is it possible for this link to be dynamically displayed within the body o ...

javascripthtml

Error Encountered While Building Flask Application

Whenever I try to submit the form, an error pops up and I can't see the flash message even though it's added to my database: werkzeug.routing.BuildError BuildError: ('/contacts', {}, None) Here are my methods: @app.route('/conta ...

pythonhtmlsqliteflask

You are unable to select the element in IE if there is an image in the background

Apologies for coming back with the same question, as I realize now that I was not clear in my explanation yesterday. You can find the codepen here (please note that it may not open in IE8). My issue is with dragging the 'move-obj' element in IE b ...

javascripthtmljquerycssinternet-explorer

A contact form overlaying a muted Google Maps view in an HTML website

Currently, I am in the process of developing a website that features a contact form. It would be great if I could incorporate Google Maps as a background, but with a greyed-out effect instead of a plain white page. After trying out a few solutions, I ende ...

htmlcssgoogle-mapsiframe

Browser fails to display input value when altered

I have noticed that when the value of the Input element changes, the browser does not display the updated value. However, you can verify this change by inspecting the DevTools in the browser. I am curious as to why the actual value of the Input element is ...

javascripthtmlreactjsnext.js

IE is notorious for not playing well with CSS

I am facing an issue with my Google search box code. It works perfectly on Firefox, Chrome, and other browsers except for Internet Explorer. Can anyone help me troubleshoot this? Below is the code snippet: Abulkas Tablet #outerContainer{ width: ...

htmlcss

Aligning two lines next to a radio button using HTML and CSS

I'm facing a challenge where I want to align two lines in the middle of a radio button. Despite my efforts, I am able to line up the top line but struggling with the bottom one. I prefer not floating the radio button as it's being styled using a ...

htmlcss

Skip nodes in Polymer 1.0 by using ExcludeLocalNames

I recently attempted to transition from Polymer version 0.5 to 1.0 and came across a particular question: Is there a way to exclude certain nodes inside a paper-menu? In the previous version (0.5), you could use the attribute excludedLocalNames to achieve ...

javascripthtmlpolymer

Utilizing reusable styled components with pseudo elements and advanced logic

How can I make the shared style more dynamic by changing the value of left or width based on a passed value or boolean logic across different components? I prefer not to pass it as a prop in the actual component like <bar left="20" />, but ...

cssreactjsstyled-components

Standard tag for all JSP pages including doctype declaration and styles

I have multiple .jsp files and a page.tag that contains information about all the .jsp files. I don't want to include doctype, styles, and scripts in every single .jsp file, as it would require changing them individually if any updates are needed. Ins ...

htmljsp

I'm facing an issue with my LAMP stack where the image appears when I access it through a URL, but doesn't seem to load when I try to load it using jQuery

My PHP file is located at path/renderer/renderImage.php and it generates a PNG image that displays correctly in the browser when I visit the URL directly. However, when I try to load this image into a DIV using jQuery from path/index.html with the followin ...

phpjqueryhtmllamp

Exploring the challenges of applying styles to buttons using the :first-child and :last-child selectors, especially when

I successfully applied rounded corners to the first and last elements of a styled button using CSS. Here is how it looks: The issue arises when I dynamically insert new buttons using Angular's ng-if. The new buttons disrupt the rounded corners of th ...

cssangularjs

Ensure that both tables contain columns of equal size

I am facing a challenge with 2 HTML tables that are positioned directly on top of each other. Each table has the same number of columns, however, the text within them may vary. Additionally, both tables can consist of multiple rows. My goal is to ensure th ...

htmlcss

Guarantee that unique events are triggered following h5validate events

I am currently experiencing a problem with H5Validate where its events are overriding the custom events I have implemented, causing my events not to trigger because they are based on H5validate events. To work around this issue, I have resorted to setting ...

htmljqueryvalidation