I have the following html which renders the following
<input type="checkbox" class='btn-filter' style='zoom:2; id="inactive-accounts" name="" value="1">
<label style= 'font-size:15px' for="inactive-accounts">Show Inactive Accounts</label><br>
If the checkbox is a regular size the text lines up well with the checkbox but since I am using zoom to increase the size of the checkbox it is not aligned correctly. I tried a solution I found on stack overflow to create CSS like so:
.checkboxes label {
display: inline-block;
padding-right: 10px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
zoom:"2"
}
.checkboxes label span {
vertical-align: middle;
}
<input type="checkbox" class='btn-filter' style='zoom:2; justify-content:center' id="inactive-accounts" name="" value="1">
<label style= 'font-size:15px' for="inactive-accounts">Show Inactive Accounts</label><br>
but this does not fix the issue. Could it be that I should not be using zoom to increase the size of the checkbox here?
I highly discourage using the property ZOOM. To increase the element, it is better to use - transform.
https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
.checkboxes {
outline: 1px solid green;
padding: 20px;
font-size: 20px;
display: flex;
align-items: center;
}
.checkboxes input, .checkboxes label {
margin: 0;
min-height: 20px;
display: flex;
align-items: center;
}
.checkboxes label {
white-space: nowrap;
margin-left: 7px;
outline: 1px solid grey;
padding-left: 5px;
}
.checkboxes input {
transform: scale(2);
outline: 1px solid grey;
}
.checkboxes label span {
vertical-align: middle;
}
<div class="checkboxes">
<input type="checkbox" id="inactive-accounts" name="" value="1">
<label for="inactive-accounts">Show Inactive Accounts</label>
</div>
Are you free to wrap your elements in a div or "container" element? If so, you can set display: flex; and align-items: center; onto that element, which would align your input and label.
Here's a snippet showing both a regular and zoomed checkbox alongside a label.
div {
display: flex;
align-items: center;
}
<div>
<input type="checkbox" class='btn-filter' style='zoom:2; justify-content:center' id="inactive-accounts" name="" value="1">
<label style='font-size:15px' for="inactive-accounts">Show Inactive Accounts</label>
</div>
<br>
<div>
<input type="checkbox" class='btn-filter' style='zoom:1; justify-content:center' id="inactive-accounts-2" name="" value="1">
<label style='font-size:15px' for="inactive-accounts-2">Show Inactive Accounts</label>
</div>
Related
I am working on a project where there is a checkbox and a label, and they need to be aligned on the same line, with the text vertically aligned center to the checkbox. But the text comes slightly below the checkbox.
import React from "react";
import './checkbox.less';
interface ICheckBoxProps {
label: string;
}
const Checkbox:React.FC<ICheckBoxProps> = ({label}) => (
<div className="flex">
<div>
<input
type="checkbox"
id={label}
className = "container"
/>
<label htmlFor={label} className="label">{label}</label>
</div>
</div>
)
export default Checkbox;
The CSS File :
.App {
font-family: sans-serif;
text-align: center;
position:relative;
display: inline;
}
.container {
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: left;
vertical-align:middle;
display:inline-block;
}
.flex{
display: flex;
align-items: center;
justify-content: flex-start;
vertical-align:middle;
display: inline-flex;
}
.label{
display : inline;
}
Please help
This is because you apply a margin-bottom: 12px; on your <input type="checkbox"/> element (through .container class):
<input
type="checkbox"
id={label}
className = "container"
/>
.container {
margin-bottom: 12px;
You can simply not apply this margin on the <input> only (see label1 in below screenshot), or apply it on the containing div (that wraps both the <input> and the <label>, see label2 in below screenshot):
<div className="flex">
<div class="container2">
<input type="checkbox" id="label2" class="container1" />
<label for="label2" class="label">{label2 margin-bottom on containing div (both input and label)}</label>
</div>
</div>
.container1 {
/*margin-bottom: 12px;*/
}
.container2 {
margin-bottom: 12px;
}
Demo: https://jsfiddle.net/sabr7xw0/2/
I got this custom CSS code for the WooCommerce product search bar on the generatepress forums, thanks to David.
When I enter that custom CSS code, the search bar looks like this: https://i.stack.imgur.com/8CMdx.jpg
.woocommerce-product-search {
border-radius: 40px;
overflow: hidden;
display: flex;
flex-direction: row-reverse
}
.woocommerce-product-search input {
border-radius: 0 40px 40px 0;
border-left: 0
}
.woocommerce-product-search button:before {
content: "seach";
font-family: "Arial";
text-align: center;
display: inline-block;
font-size: 15px;
}
.woocommerce-product-search button {
font-size: 0px;
background-color: #fafafa;
color: #666666;
border: 1px solid #cccccc;
border-right: 0;
border-radius: 40px 0 0 40px;
}
I want the bar to stay that way but with the "search" button on the right side, like this: https://i.stack.imgur.com/FaOMt.jpg
Please, could you help me to do it? I would appreciate it very much.
---EDIT 12/11/2020---
HTML:
<div class="woocommerce widget_product_search"><form role="search" method="get" class="woocommerce-product-search" action="https://example.com/">
<label class="screen-reader-text" for="woocommerce-product-search-field-0">Search for:</label>
<input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search products…" value="" name="s" />
<button type="submit" value="Search">Search</button>
<input type="hidden" name="post_type" value="product" />
</form>
</div>
Not sure that this will solve the issue without seeing the html, but give it a try:
.woocommerce-product-search {
border-radius: 40px;
overflow: hidden;
display: flex;
flex-direction: row;
}
I have a label defined where one half needs to be at left side and the other half of text needs to be on right side. How can I solve this so that the other half is pulled right?
I have added margin-right to get the text to pull at right but it's not consistent for other divs.
<div class="radio">
<input class="radio-test" type="radio" value="3" checked="checked" name="test[id]" id="test_id">
<label class="radio-label" for="test_id_1">
Test of $12.0
<span class="test-cost">Free</span>
</label>
<hr class="test-hr">
<p class="test-message"></p><p>- First test message</p><p></p>
</div>
Expected Result:
Current Result:
How can I make text in above image i.e. 'Free' to appear on the right most side as shown on expected result? Also make it always consistent on other div such that the space from div is same across.
Here is a complete working example with JsBin: https://jsbin.com/yafesuyola/1/edit?html,css,output
It uses flexbox with justify-content: space-between. I also added a div around the label and the input to keep them on the same line with 100% width.
<div class="radio">
<div class="radio-and-label">
<input class="radio-test" type="radio" value="3" checked="checked" name="test[id]" id="test_id">
<label class="radio-label" for="test_id_1">
Test of $12.0
<span class="test-cost">Free</span>
</label>
</div>
<hr class="test-hr">
<p class="test-message"></p><p>- First test message</p><p></p>
</div>
.radio {
border: 2px solid #33c;
border-radius: 5px;
padding: 10px;
background: #e0eeff;
color: #33c;
font-weight: bold;
}
.radio-and-label {
display: flex;
}
.radio-label {
width: 100%;
display: flex;
justify-content: space-between;
}
.test-cost {
text-align: right;
}
.test-hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
Hope that helps!
Clip the element to always be pinned to top right of the element?
.radio {
position: relative;
}
.test-cost {
position: absolute;
top: 2px;
right: 2px; // or whatever px/rem/etc value that fits your need
}
I used custom checkbox and radio button for my project using :before and :after, but this work only in "Google Chrome" and not supported in other browsers, Is any trick that's why it should look same in all browser, I don't want to use label after checkbox or radio button.
CSS is here:
FIDDLE ( For example )
My actual radio button looks like this :
Google Chrome:
Firefox:
IE:
Pseudo Elements like :before and :after add content before and after the content of an element. Checkbox and Radio buttons do not have content, so they don't support before and after pseudo elements. Chrome is ' special ' , but the normal behavior is the one from FF and IE.
Furthermore checkbox and radio are browser default elements. They are very hard to change and not supposed to be changed.
Although you said you don't want to add a label, that's the way to go. Add it with position absolute to put it on top of the radiobutton/checkbox like in the example below
body {
padding: 50px;
}
input[type='radio'] {
margin: 0;
height: 13px;
width: 13px;
margin-top: 2px;
position: relative;
}
div.wrapper {
position: relative;
}
input[type='radio'] + label {
content: '';
display: inline-block;
width: 13px;
height: 13px;
border: none;
position: absolute;
left: 0;
top: 1px;
background: gray url("../images/i-radio-empty.png") no-repeat 0 0;
}
input[type='radio']:checked + label {
width: 13px;
height: 13px;
background: red url("../images/i-radio-checked.png") no-repeat 0 0;
}
<div class="wrapper">
<input type="radio" name="gender" value="male" id="male"> Male
<label for="male"></label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="female" id="female"> Female
<label for="female"></label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="other" id="other"> Other
<label for="other"></label>
</div>
Mihai T's solution isn't bad, but not checking checkbox when cliking on text can be really anoying. I personally hate it :)
Though it is true that radio and chekbox does not support pseudo elemens :before and :after but label does. So you can have normal label with text and pseudo element :before with position: absolute.
div.wrapper {
position: relative;
display: inline-block;
margin-right: 10px;
}
input[type='radio'] {
display: none;
}
input[type='radio'] + label {
padding-left: 20px;
}
input[type='radio'] + label:before {
content: '';
width: 13px;
height: 13px;
position: absolute;
left: 0;
top: 1px;
background: #FFF;
border: 1px solid #999;
border-radius: 50%;
cursor: pointer;
box-sizing: border-box;
}
input[type='radio']:checked + label:before {
background: #000;
border: 4px solid #F9CC55;
}
<div class="wrapper">
<input type="radio" name="gender" value="male" id="male">
<label for="male">Create Tabs Group</label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="female" id="female">
<label for="female">Update Existing Tabs Group</label>
</div>
I'm trying to figure out if there is any pure CSS solution to keep a drop-down element open while the input field of that element is focused? Here is an example:
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
}
div:hover form {
display: block;
}
form {
display: none;
padding: 0 15px;
}
<div>Hover Me
<form class="search">
<input type="search" placeholder="What are you looking for?" autofocus>
<input type="button" value="Search!">
</form>
</div>
The idea is to keep the form visible when the search field is focused. Because when a user starts typing the search inquiry and the mouse move out of the hover zone, the form hides, and that's very annoying.
Side-question: Is it possible to focus via CSS search input element each time a <div> is hovered?
The solution has been already proposed, but lacks browser support:
9.4. The Generalized Input Focus Pseudo-class: :focus-within
The :focus-within pseudo-class applies to elements for which the
:focus pseudo class applies.
An element also matches :focus-within if one of its
shadow-including descendants matches :focus.
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
}
div:hover form, div:focus-within form {
display: block;
}
form {
display: none;
padding: 0 15px;
}
<div tabindex="-1">Hover Me
<form class="search">
<input type="search" placeholder="What are you looking for?" autofocus>
<input type="button" value="Search!">
</form>
</div>
Meanwhile, you can use a polyfill:
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
}
div:hover form, div.focus-within form {
display: block;
}
form {
display: none;
padding: 0 15px;
}
<script src="https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/"></script>
<div tabindex="-1">Hover Me
<form class="search">
<input type="search" placeholder="What are you looking for?" autofocus>
<input type="button" value="Search!">
</form>
</div>
Wait. There's actually a pure CSS solution. But there is a drawback — it only works with just one <input> tag, and no <form> tag, like this:
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
padding: 0.5%;
}
input {
display: none;
margin: auto;
}
div:hover input {
display: block;
}
input:focus {
display: block !important
}
<div>Hover Me
<input type="search" placeholder="What are you looking for?">
</form>
</div>
However, you can just make the user search the form by pressing Enter on the keyboard. Unfortunately, this requires JavaScript, which defeats the whole purpose of this post.
I've also noticed that your placeholder text doesn't really work properly, since the text "Search" is still there. There are two solutions to this — use JavaScript to fix it, or change the 'type' of the input tag to "text".