How can I horizontally center the blue circle that appears when a radio button is clicked?
How can I horizontally center the blue circle that appears when a radio button is clicked?
Try this update as it might resolve your problem.
input[type="radio"]:after {
content: "•";
font-size: 2em;
line-height: .55;
left: .025em;
}
body {
margin: 3em;
font-size: 24px;
font-family: arial;
}
/* Input Controls */
label {
line-height: 1em;
position: relative;
overflow: show;
cursor: pointer;
margin-right: 1em;
}
label input {
margin: 0 .15em 0 0;
padding: 0;
vertical-align: middle;
cursor: pointer;
position: relative;
top: -.1em;
}
input[type="radio"],
input[type="checkbox"] {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
font-size: 1em;
line-height: 1
}
input[type="radio"]:before,
input[type="radio"]:after,
input[type="checkbox"]:before,
input[type="checkbox"]:after {
width: 100% !important;
height: 100% !important;
display: inline-block;
content: '';
font-family: 'icons-presto', fantasy !important;
font-style: normal !important;
font-weight: normal !important;
line-height: 1;
}
input[type="radio"]:before,
input[type="checkbox"]:before {
background: rgb(254, 234, 234);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(254, 234, 234, 1) 100%);
/* W3C — Add Browser extension versions for greater backwards compatibility */
border: 1px solid rgb(204, 170, 170);
box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
position: relative;
top: 0;
left: 0;
}
input[type="radio"]:after,
input[type="checkbox"]:after {
color: rgb(65, 146, 238);
position: absolute;
opacity: 0;
text-align: center;
top: 0;
left: 0;
}
input[type="radio"]:checked:before,
input[type="checkbox"]:checked:before {
background: rgb(234, 234, 254);
background: linear-gradient(to bottom, rgba(214, 214, 254, 1) 0%, rgba(255, 255, 255, 1) 100%);
/* W3C */
border-color: rgba(65, 146, 238, .5);
box-shadow: 1px 1px 1px rgba(0, 0, 0, .1) inset;
}
input[type="radio"]:before {
border-radius: 2em;
}
input[type="radio"]:after {
content: "•";
font-size: 2em;
line-height: .55;
left: .025em;
}
input[type="radio"]:hover:after {
opacity: .25;
}
input[type="radio"]:checked:after {
opacity: 1;
}
input[type="checkbox"]:before {
border-radius: .25em;
color: rgba(170, 170, 170, 0);
}
input[type="checkbox"]:after {
content: "✔";
}
input[type="checkbox"]:hover:after {
opacity: .25;
}
input[type="checkbox"]:checked:after {
opacity: 1;
}<form>
<label for="option1">
<input type="radio" name="radiotest" value="option1" id="option1" />Option 1
</label>
<label for="option2">
<input type="radio" name="radiotest" value="option2" id="option2" />Option 2
</label>
<label for="option3">
<input type="radio" name="radiotest" value="option3" id="option3" />Option 3
</label>
<label for="option4">
<input type="radio" name="radiotest" value="option4" id="option4" />Option 4
</label>
<hr>
<label for="c1">
<input type="checkbox" id="c1" name="cc" />Checkbox 1
</label>
<label for="c2">
<input type="checkbox" id="c2" name="cc" />Checkbox 2
</label>
<label for="c3">
<input type="checkbox" id="c3" name="cc" />Checkbox 3
</label>
<label for="c4">
<input type="checkbox" id="c4" name="cc" />Checkbox 4
</label>
</form>Looking to adjust the size of a ruler? In horizontal mode, the ruler expands and contracts as you resize it. However, in vertical mode, the ruler shifts left as you shrink it and right as you expand it. You can resize the ruler by dragging the small r ...
I am currently working on customizing a Bootstrap navigation bar using CSS to ensure that the shopping cart icon remains on the right side of the bar on both desktop and mobile devices. Despite my efforts to arrange the elements in various ways, the CSS "o ...
I am currently trying to update my webpage from a JQuery UI dialog, but the code I have so far does not seem to be working. Any assistance or guidance would be greatly appreciated. function submit_new_site() { // These are the input text IDs on the ...
Hello there! I'm currently learning web development and attempting to create a button that collapses the navbar. I've gone through answers to similar questions but haven't found the solution that works for me. I've ensured that I have ...
As a newcomer to Angular, I am diving into the best approach for addressing a specific scenario. On my page, I have multiple tiles resembling mat-cards, each equipped with various functionalities such as displaying charts, tables, and associated actions. ...
I've been working on centering three images under the h1 text, but I'm struggling to figure it out. I tried using div to wrap all the elements and align them with text-align. I also gave each image its own ID and attempted to position them using ...
I am working with AngularJS material and I want to dynamically load an image based on the status of a switch. Here is the relevant HTML code: If the switch status sw_status.sw1 is true, then load the image truePic.jpg. If it is false, load the image false ...
When a user selects a file, the filename value is automatically inserted into the fileName field. However, the validation fails because the field is still considered empty until at least one more character is added. How can I fix this issue? This is how t ...
I have created a rollover submit button using HTML and JavaScript: <input type="image" id="join" name="join" src="images/join.png" value="join"> My JS code implements the rollover/hover effect: <script type="text/javascript" charset="utf-8"> ...
Greetings, I am seeking assistance as I am new to KnockoutJS. I am working with a class named green-bar that I need to activate when two particular states are true. Unfortunately, the solution I came up with below is not functioning correctly, and I'm ...
Check out my website www.abc.com Incorporating an iframe in www.abc.com using <iframe src="www.xyz.com"></iframe> An issue has arisen: Error message: "Failed to read the 'localStorage' property from 'Window': A ...
I'm in the process of creating a flexible website design. https://i.sstatic.net/68qW2.png Everything seems to be going well so far. Here's what I have: <div class="container"> <div class="products-block"> <h2>Prod ...
Take a look at this unique SVG: <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"><![CDATA[ .code { font-family: monospace; white-space: pre; tab-size: 4; } ]]></style> </defs> <text class="cod ...
As a beginner in php/html, I am eager to learn how to create and process an html form. Recently, I set up a new folder named Website. Within this folder, I created an index.html file and a submit.php file. (reference: http://www.w3schools.com/php/php_for ...
I have come across a block of HTML code that contains form action elements and multiple occurrences of quotation marks. Is there a method to convert the entire block into a string? public string methodName() { return @ " text goes here.. blah blah ...
My goal is to have a red background appear when an input is invalid upon form submission. I attempted the following code: input:invalid { background-color:red; } While this solution worked, it caused the red background to show up as soon as the page l ...
I am trying to create a 3D element that rotates on both the x and y axes based on the position of the mouse on the screen. While I have successfully achieved this effect using either the X or Y position, I am struggling to make it work simultaneously for b ...
When the register function in a file named signup.php captures field values with Ajax and sends them to register.php, it should display a toast reply. // JavaScript code inside signup.php <script type="text/javascript"> function register(){ v ...
There seems to be a simple issue here that needs my attention before diving into PHP tasks. I plan on using PHPMailer this time around. I've been attempting to learn how to submit a form on localhost for the past week, and now I'm going to try i ...
Utilizing express and node for server hosting, socket io is employed to track users by saving their unique socket.id. There are two pages in the webapp - a login page and a content page. app.get("/", function(req, res) { res.sendFile(__dirname + "/log ...