For a school project, I am focusing on the use of radio buttons and checkboxes. While I have found plenty of code examples online for creating them, I am limited to using certain HTML tags and cannot use jQuery.
The permitted tags include:
• html, head, body, title, meta, link
• header, section, article, footer
• div
• h1-h6
• p
• span
• ul, ol, li
• a
• img
• audio
Is it possible to implement checkboxes and radio buttons using only these specified tags?
Radio buttons
I've successfully implemented radio buttons, but they only seem to work when one of them is in focus.
.radio {
display: inline-block;
position: relative;
margin-left: 1em;
padding-left: 1.5em;
}
.radio::before {
content: "";
display: inline-block;
border: 1px solid black;
width: 1em;
height: 1em;
border-radius: 100%;
position: absolute;
left: 0;
top: 0;
}
.radio:focus {
outline: none;
}
.radio:focus::after {
content: "";
display: inline-block;
border: 1px solid black;
width: 0.5em;
height: 0.5em;
border-radius: 100%;
position: absolute;
background-color: black;
left: 0.25em;
top: 0.25em;
}<ul class="radio-group">
<li tabindex="0" class="radio">Option 1</li>
<li tabindex="0" class="radio">Option 2</li>
<li tabindex="0" class="radio">Option 3</li>
</ul>The key component here is the tabindex in <li> elements, which enables them to be focused.
The tabindex global attribute specifies whether an element can receive focus and its order in keyboard navigation (typically triggered by the Tab key). It takes an integer as a value with different effects based on the number: [...]
Checkboxes
I've styled checkboxes, but I'm unsure how to enable them without JavaScript. (Currently, they function like the radios.)
.check {
display: inline-block;
position: relative;
margin-left: 1em;
padding-left: 1.5em;
}
.check::before {
content: "";
display: inline-block;
border: 1px solid black;
width: 1em;
height: 1em;
position: absolute;
left: 0;
top: 0;
}
.check:focus {
outline: none;
}
.check:focus::after {
content: "";
display: inline-block;
border-left: 3px solid black;
border-bottom: 3px solid black;
transform: rotate(-45deg);
width: 1em;
height: 0.5em;
position: absolute;
left: 0.1em;
top: -0.1em;
}<ul class="check-boxes">
<li tabindex="0" class="check">Option 1</li>
<li tabindex="0" class="check">Option 2</li>
<li tabindex="0" class="check">Option 3</li>
</ul>Hint: The closest purely CSS approach I can think of for maintaining state would involve using CSS counters, but since selectors cannot target counter values...
If you want to collect user input in HTML, the input tag is your go-to option. Check out the official documentation here:
https://www.w3schools.com/html/html_form_input_types.asp
Keep in mind that with only certain tags allowed, you won't be able to create radio buttons and checkboxes.
Looking for a way to parse HTML strings into nodes like this? Our society reflects, and is a reflection of, the <del>individual</del><add>person</add> (you and I) , and the <del>individual</del><add>person</add ...
I'm attempting to create something similar to this: Here's what I have so far: Html: <div class="panel-heading" data-toggle="collapse" href="#data2"> <div class="heading"> APPLICATION </div> <span clas ...
I am currently working with the tab view feature in primefaces and I have encountered a couple of issues. 1) When using Internet Explorer, the tabs are displayed vertically instead of horizontally. However, it works fine in Firefox. FireFox : Internet E ...
Currently, I'm engaged in a project where my task involves duplicating an entire website using HTTrack. However, I only need to copy the main page and web pages that are one link deep. Upon copying the website, my next challenge is to translate all of ...
I have been scouring the internet for a solution to this issue. Essentially, I am trying to position the button on the right side in desktop view. Here is an example: chrome view However, when the site is resized or viewed on mobile devices, the button sh ...
I believe that using css3 alone can achieve this effect, but I'm struggling with understanding properties like 'ease' in css3. This is the progress I have made so far: http://jsfiddle.net/kwgy9/1/ The word 'nike' should slide to ...
For a while now, I've been working on a basic application using Adobe AIR, specifically the HTML and JavaScript version. What this application does is submit a form to an online URL, with the form values being converted to JSON strings. In order to ...
Recently, I created an SVG-based loading indicator using an online tool. However, every time a page with this loading indicator loads, Chrome displays a warning about SMIL animations being deprecated. To address this issue, I decided to explore replacing t ...
I'm working on an HTML file, which is basically a webpage. My goal is to create a functionality where clicking a button will dynamically replace the content of the page with another HTML file, complete with its own CSS, JavaScript functions, and other ...
One of my challenges involves working with a Canvas Element: <canvas id="canvas" width="300" height="300"> Sorry, your browser does not support the Canvas element </canvas> In my JavaScript file, I have the following code: var ct= docum ...
I recently came across mraid technology and banner ads for the first time. The technical Specification mentioned that you can use any tool and scripts can be placed in a separate file, so I decided to create a game using Svelte. However, I am unsure about ...
I've been exploring the idea of cloning a webpage, such as Instagram's login page, along with its CSS elements and JavaScript, to use locally. Basically, I want to duplicate the login page and host it on my test server in a way that allows it to ...
Currently, I am in the process of developing a website and facing challenges with displaying CSS properties accurately. Despite seeking input from friends and users, my HTML file is not rendering as expected within various browsers such as Chrome, Edge, an ...
I need to achieve three tasks onclick: change the display:none property of the element with id="notes_content" to display: block modify the width of the element with id="oct" from 1190px to 550px update the width of elements with class="oct_days" from ...
Enabling the placeholder property on an input field allows the text to disappear when something is written and reappear when everything is deleted. Here's the question: Is it feasible to delay the reappearance of the placeholder text until after the t ...
Currently utilizing Vaadin 24. I have implemented a side menu with the use of "DrawerToggle" to toggle the visibility of menu items when the burger icon is clicked, which functions smoothly. DrawerToggle toggle = new DrawerToggle(); SideNav nav = cr ...
Is it possible to add a circular shape in the intersection table, or should an image (table) be utilized from the layout? ...
Hello everyone, I am currently working on Rails 3.2.13 and have implemented the following script in my view file. Whenever a user selects 'Other' as their owner type, I need the div with id=group_user_id to open and save the operation at the end. ...
I decided to enhance the look of my website by adding a new background color class. I consulted Bootstrap documentation to guide me through the process and here's what I came up with: @import "./BOOTSTRAP-CSS/scss/functions"; @import ". ...
Whenever I click a link on my HTML page, I want a popup element (just a div box) to appear above the clicked link. I have been using JavaScript for this, but I am facing an issue where the popup element appears below the link instead of above it. Can you ...