Remove Edges from element

Question

Remove Edges from element

Asked 5 years, 6 months ago

Viewed 174 times

0

I need a great help, I created a layout as in the example below

<style>
/*
 CSS for the main interaction
*/
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}

/*
 Styling
*/
body {
  font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
  color: #333;
  font-weight: 300;
}

.tabset > label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 25px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
}



.tabset > label:hover,
.tabset > input:focus + label {
  color: #06c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}

.tabset > input:checked + label {
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.tab-panel {
  padding: 30px 0;
  border-top: 1px solid #ccc;
}

/*
 Demo purposes only
*/
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 30px;
}

.tabset {
  max-width: 65em;
}

.tabset {
    max-width: 65em;
    border: 1px solid gra;
    border-radius: 10px;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
        
}

.tabset > input:checked + label {
    border-color: #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}
</style>

<center>
<div class="tabset">
  <!-- Tab 1 -->
  <input type="radio" name="tabset" id="tab1" aria-controls="marzen" checked>
  <label for="tab1">Box 1</label>
  <!-- Tab 2 -->
  <input type="radio" name="tabset" id="tab2" aria-controls="rauchbier">
  <label for="tab2">Box 2</label>
  <!-- Tab 3 -->
  <input type="radio" name="tabset" id="tab3" aria-controls="dunkles">
  <label for="tab3">Box 3</label>
  
  <div class="tab-panels">
    <section id="marzen" class="tab-panel">
      <h2>texto 1</h2>
    <label>
    <span> teste</span>
    <input type="tel" name="telephone">
  </label>
   <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
   </select> 

    <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
   </select> 

 <a> botão </a>


  </section>
    <section id="rauchbier" class="tab-panel">
    <h2>texto 2</h2>
    <label>
    <span> teste</span>
    <input type="tel" name="telephone">
  </label>
   <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
   </select> 

    <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
   </select> 

 <a> botão </a>

    </section>



    <section id="dunkles" class="tab-panel">
      <h2>texto 3 </h2>
    <label>
    <span> teste</span>
    <input type="tel" name="telephone">
  </label>
   <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
   </select> 

    <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
   </select> 

 <a> botão </a>
    </section>
  </div>
  
</div>
</center>

I need to remove the right and left edges as the print below.

How can I do this via css?

2 answers

1

It is enough not to use the marriage in the parent element but rather in the child element which is the container of tabs. Then remove the edges of the .tabset and put in the .tab-panels

Your CSS will look like this, note that in border-radius I only used the curvature in the two lower corners and the top left straight, so I used 4 values 0 0 10px 10px

.tab-panels {
  border: 1px solid gray;
  border-radius: 0 0 10px 10px ;
  border-top: none;
}

That would correspond to

border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

/*
  CSS for the main interaction
*/
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}

.tab-panels {
  border: 1px solid gray;
  border-radius: 0 0 10px 10px ;
  border-top: none;
}
/*
  Styling
*/
body {
  font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
  color: #333;
  font-weight: 300;
}

.tabset > label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 25px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
}



.tabset > label:hover,
.tabset > input:focus + label {
  color: #06c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}

.tabset > input:checked + label {
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.tab-panel {
  padding: 30px 0;
  border-top: 1px solid #ccc;
}

/*
  Demo purposes only
*/
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 30px;
}

.tabset {
  max-width: 65em;
}

.tabset {
    max-width: 65em;
        
}

.tabset > input:checked + label {
    border-color: #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}

<center>
<div class="tabset">
  <!-- Tab 1 -->
  <input type="radio" name="tabset" id="tab1" aria-controls="marzen" checked>
  <label for="tab1">Box 1</label>
  <!-- Tab 2 -->
  <input type="radio" name="tabset" id="tab2" aria-controls="rauchbier">
  <label for="tab2">Box 2</label>
  <!-- Tab 3 -->
  <input type="radio" name="tabset" id="tab3" aria-controls="dunkles">
  <label for="tab3">Box 3</label>
  
  <div class="tab-panels">
    <section id="marzen" class="tab-panel">
      <h2>texto 1</h2>
    <label>
    <span> teste</span>
    <input type="tel" name="telephone">
  </label>
    <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
    </select> 

    <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
    </select> 

  <a> botão </a>


  </section>
    <section id="rauchbier" class="tab-panel">
    <h2>texto 2</h2>
    <label>
    <span> teste</span>
    <input type="tel" name="telephone">
  </label>
    <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
    </select> 

    <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
    </select> 

  <a> botão </a>

    </section>



    <section id="dunkles" class="tab-panel">
      <h2>texto 3 </h2>
    <label>
    <span> teste</span>
    <input type="tel" name="telephone">
  </label>
    <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
    </select> 

    <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
    </select> 

  <a> botão </a>
    </section>
  </div>
  
</div>
</center>

1

Thanks man! Helped me a lot, abs.

– Thiago Maia

2019/04/29 at 15:40
1

@Thiagomaia quiet young, be sure to take a look at the link with the documentation

– hugocsl

2019/04/29 at 15:42

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.

by Sumback • **496** points · Answer 1 · 2019-04-29T15:16:51+00:00

-1

Change the border-right and the border-left for none.

I did it but it erases the edges of the left and right totally, I need to be erased only the top edges, which are left, as in the print.

– Thiago Maia

2019/04/29 at 15:24