For the life of mine I can't figure out how to achieve the following.

I need to create a form with support for preview of the typed content just like the Github new issue creation form as below

What I want to replicate is the curved border around the Write/Preview pair with the Write and Preview demarcated just as shown in this image.

How can this be achieved in CSS?

Thanks

CodePudding user response：

One approach is to set a background-color for the active tab, also set its bottom border color to the same color of its background, then move it down for 1px to obstruct the longer border line.

[...document.querySelectorAll('.tabs > *')].forEach((tab, i, arr) => {
  
  tab.addEventListener('click', () => {
    arr.forEach(tab => tab.classList.remove('active'));
    tab.classList.add('active');
  });
})

.wrapper {
  padding: 4px;
}

.tabs {
  display: flex;
  border-bottom: solid 1px gray;
}

.tabs a {
  text-decoration: none;
  padding: 10px 16px;
  margin-left: 10px;
  border: solid 1px transparent;
  
  /* only rounded border for top left and right */
  border-radius: 8px 8px 0px 0px;
  
  /* move the tab 1px downwards */
  margin-bottom: -1px;
}

.tabs a.active {
  border: solid 1px gray;
  background-color: #fff;
  border-bottom-color: white;
}

<div >
  <div >
    <a href="#" >Write</a>
    <a href="#">Preview</a>
  </div>
  <div >
    <p>content</p>
  </div>
</div>

CodePudding user response：

I'm not sure how you're intending on using such an editor, but if it's html based take a look at javascript based markdown editors. They would use css, but the javascript is the primary way they handle all of the features. Some of the editors are highly featured and provide a preview of the formatted text.

Here is one document that highlights 10 different editors that may provide what you are looking for.