I am looking to connect the borders between my checkboxes.
I attempted to use pseudo-borders, but encountered issues with setting the height for responsiveness across various screens.
If anyone has suggestions on how to tackle this issue for responsive design, please share your insights.
One way to achieve a dashed border effect is by using the border-style: dashed property along with the ::before pseudo-element like this:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
justify-content: start;
}
.box1 {
width: 100%;
}
.box2 {
display: flex;
flex-wrap: wrap;
justify-content: start;
align-items: center;
border-left: 3px solid black;
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-style: dashed;
height: 10rem;
width: 10rem;
}
.input1 {
position: relative;
display: flex;
justify-content: start;
align-items: center;
width: 2rem;
height: 2rem;
margin-left: -0.85rem;
margin-bottom: -0.05rem;
}
.input2 {
position: relative;
display: flex;
justify-content: start;
align-items: center;
width: 2rem;
height: 2rem;
margin-left: 4rem;
}
.input2::before {
content: '';
position: absolute;
left: -4rem;
border: 2px solid black;
border-style: dashed;
width: 60px;
}<div class="container">
<div class="box1">
<input type="checkbox" class="input1" />
</div>
<div class="box2">
<input type="checkbox" class="input2" />
<input type="checkbox" class="input2" />
</div>
</div>To begin, it is essential to use semantic HTML. Additionally, you have the option to incorporate pseudoelements with gradient backgrounds to create the dashed lines.
However, this technique can be delicate as it relies on specific numbers for alignment, which may vary based on font and checkbox size. In the future, utilizing anchor positioning could offer a solution. For now, the most precise approach would involve using SVG or canvas to draw the lines accurately according to element positions.
Having said that, here is a brief CSS attempt at achieving the effect:
ul {
padding: 0;
list-style-type: "";
--dash-color: lightgray;
--dash-length: 3px;
--dash-gap: 5px;
}
ul ul {
--nested-list-indent: 20px;
padding-inline-start: var(--nested-list-indent);
}
li {
position: relative;
display: flex;
align-items: start;
--column-gap: .5ch;
column-gap: var(--column-gap);
}
.li-content {
}
li input[type="checkbox"] {
translate: 0 -.14rem;
}
li::before {
display: block;
content: "";
position: absolute;
inset-block: .5rem;
inset-inline-start: .64rem;
width: 2px;
background-image: repeating-linear-gradient(
to bottom,
var(--dash-color),
var(--dash-color) var(--dash-length),
transparent var(--dash-length),
transparent calc(var(--dash-length) + var(--dash-gap))
);
}
li li::before {
width: calc(var(--nested-list-indent) + var(--column-gap) + 1rem);
height: 2px;
inset-inline-start: calc(-1 * var(--nested-list-indent) - var(--column-gap) - .5rem);
background-image: repeating-linear-gradient(
to right,
var(--dash-color),
var(--dash-color) var(--dash-length),
transparent var(--dash-length),
transparent calc(var(--dash-length) + var(--dash-gap))
);
}
hr {
border: none;
background-image: repeating-linear-gradient(
to right,
var(--dash-color),
var(--dash-color) var(--dash-length),
transparent var(--dash-length),
transparent calc(var(--dash-length) + var(--dash-gap))
);
height: 2px;
}<ul>
<li>
<input id="ee" name="ee" type="checkbox" checked>
<div>
<label for="ee">Electronic Equipment</label>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo in consectetur doloribus quam, rem magnam dicta autem voluptate dolor delectus.</p>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul>
<li>
<input id="ec" name="ec" type="checkbox">
<label for="ec">Escalation Clause</label>
</li>
<li>
<input id="ef" name="ef" type="checkbox">
<label for="ef">Express Freight</label>
</li>
</ul>
</div>
</li>
</ul>I created a visualization tool for sorting algorithms that displays vertical bars with varying heights and sorts them. The "Generate new Array" button triggers a function to generate a new array each time it's clicked, which is also used in the compon ...
I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...
I need help with my homepage banner image as I am trying to make it responsive by adding media queries. The goal is for the image to adapt to 3 different sizes based on the screen being used, but currently only the medium-sized version appears. Could someo ...
I am attempting to recreate a demonstration where the house image scales as the viewport height decreases. However, instead of using an <img>, I would like to use a container that also includes absolutely positioned content (unable to provide all the ...
I'm facing an issue with a selection element in my Vue project <div class="resultContainer"> <section> <option class="resultBtn" v-for="exchange in finalExchanges"> {{exchange}} <hr></option> </section> ...
I attempted to insert a PDF into my website using the <embed> tag. Unfortunately, it doesn't seem to be functioning properly in Internet Explorer when the Adobe Reader add-on is disabled. Is there a solution that will allow it to work even if th ...
I have designed a checkout system with three distinct parts - shipping information, billing information, and order confirmation. These sections are all on the same page, allowing for a seamless flow during the checkout process. Once a customer completes t ...
I am currently in the process of developing a web application that needs to occupy the entire height and width of the screen using 100vh and 100vw. The main app itself should not have any vertical or horizontal scrolling, but individual components/divs wi ...
Currently, I am in the process of converting my project from using regular CSS to styled components (https://styled-components.com/). So far, I have successfully converted all my other components except for one that I'm having trouble with. I've ...
I have a flexbox div nested inside another div, and I'm trying to adjust the height of the outer box based on the content of the inner flexbox. Here is the link to the current fiddle. The issue I am facing is that the text in the second box overflows ...
I've been searching through various discussions to find a solution, but none of them seem to fit my particular scenario. My issue involves a hyperlink with absolute positioning inside a div with relative positioning. The padding and margins are curre ...
Lately, I've been focused on structuring HTML code and it got me thinking about which elements are actually allowed as children of an <a> element. Can you help clarify? ...
Currently, I'm tasked with developing an educational website using HTML and CSS for a school project. Unfortunately, due to restrictions on code.org, I cannot utilize JavaScript files or script tags. Despite successfully implementing a parallax effect ...
Imagine you have a div called A and an array filled with text data. When t=0, div A will display $data[0]. Then, after every n seconds, I want the div to show the next piece of data in the array. I am interested in creating a transition effect similar to ...
This is the CSS style defined in a PHP file for an Element line-height: 120px; display: list-item; display: -moz-inline; list-style: none; If the browser is Chrome, I want it to show display: list-item, and if it's Mozilla, then display: inline. Th ...
I'm a beginner when it comes to CSS and I am having trouble fitting two images inside my first slider. My goal is to display the full images within the slider, but the width of the images exceeds that of the slider. Below is the CSS code for the slid ...
Initially, here are my code snippets: In the HTML file: <div class="div parent"> Title <div class="div child"> <div class="overflowed"> </div> </div> </div> CSS Styling: .div { border: 1px solid #0000 ...
I made 3 circles using CSS (:after) and noticed that the border looks uneven with certain background colors. Any suggestions on how to resolve this issue? You can view the problem here: Just below the post title, you'll find the first blue circle bo ...
This Back To Top Button code that I discovered online is quite effective on my website. // Defining a variable for the button element. const scrollToTopButton = document.getElementById('js-top'); // Creating a function to display our scroll-to- ...
After finally getting my website up and running using style.css, I am faced with the following CSS code: html { height:100%; } { position: relative; z-index: 0; width: 100%; left: 0; top: 0; cursor:default; overflow:visible; } body { ...