I need to display a cross mark inside unchecked checkbox. I have written a code like this:
HTML:
<input type="checkbox" class="cls-1"/>
CSS:
.cls-1:not(:checked):after {
content: '\00D7';
margin: 0px 0px 0px 2px;
}
The alignment of cross-mark is not correct though. There appears a space between checkbox top and cross mark top. Is there a way to make cross mark appear exactly at center.
Stackblitz for sample code can be found here: https://stackblitz.com/edit/js-ul1sgb
try this
h1, h2 {
font-family: Lato;
}
.cls-1:not(:checked):after {
content: '\00D7';
margin: 0px 0px 0px 2px;
position: absolute;
top:-2px;
}
.cls-1 {
position:relative
}
<div id="app1">
<input type="checkbox" class="cls-1"/>
</div>
can you try adding a line-height property to the input type checkbox,
say 10px;
eg:
input {
line-height: 10px;
}
Just add display: flex; align-items: center; in .cls-1. Thanks
.cls-1 {
display: flex;
align-items: center;
}
I've modified your css to center the cross. Use line-height of 0.5rem to achieve this.
h1, h2 {
font-family: Lato;
}
.cls-1:not(:checked):after {
content: '\00D7';
margin: 0px 0px 0px 2px;
display: inline-block;
vertical-align: text-top;
line-height: 0.5rem;
}
<div id="app1">
<input type="checkbox" class="cls-1"/>
</div>
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
CodeSandbox:
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js
I want to center the - text in the button, but I cannot find a way to do it.
html
<button class="round-button align-middle mr-1">
<span>-</span>
</button>
css
.round-button {
min-width: 20px;
max-height: 20px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
padding: 0;
}
.round-button:before {
content: "";
display: inline-block;
vertical-align: middle;
}
html
<button class="round-button align-middle mr-1">-</button>
css
.round-button {
min-width: 20px;
height: 20px;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 50%;
text-align: center;
padding: 0;
line-height: 20px; // to center text vertically
}
You just need to add the same line-height as your button's height and don't need an extra span element to add text. I've also removed unnecessary styles.
Try setting line-height: 20px to that. If it still looks off, you might be using a custom font with non-standard line height. In this case play with the line-height property until it looks okay.
Add the following style properties to .round-button:
.round-button {
display: flex;
align-items: center;
justify-content: center;
}
And, remove style for .round-button:before.
Try this.
.round-button {
background-color: #3498db;
border-style: none;
border-radius: 100%;
color: #fff;
cursor: pointer;
aspect-ratio: 1 / 1;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
<button class="round-button">
<span>-</span>
</button>
Try changing <span>-</span> to <span style="position:relative; left:0px; top:-3px">-</span>. If it doesn't look right you can play around with it.
The spent text with the teal background is meant to be a tag, and I want the tag to appear above the todo bar...kind of like this:
Like a small rectangle on top of a big one. So the tag would be on the top left corner of the todo bar. How would I achieve this? I've tried doing margin to the tag, but that did not work out at all.
CSS for the tag (style.css)
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
React JS code for the tag part (Todo.js)
<li className={`todo-item${todo.completed ? "completed" : ""}`}>
{isSpent && <p className="tag">Spent</p>}
{isReceived && <p className="tag">Received</p>} ${text}
</li>
In case anyone needs the whole of the todo.css file: https://pastecode.io/s/s5XZ9e3DRW
If you need anymore information, or if my question was poorly phrased, please tell me. Any help is very much appreciated. Thank you!
I think if yow will separate the tag and the navbar to two different div tags and put them on main div something like:
<div id="wrapper">
<div id="top-left">top left div</div>
<div id="down">down side div</div>
</div>
and the css will be something like (using grid on the main div):
#wrapper {
display: grid;
}
#top-left {
background: green;
width: 250px;
float:left;
margin-right: 20px;
}
#down {
background: blue;
float:left;
width: 500px;
}
the result is:
I would go with something like this, where input:focus could be a class set on on .container, for example, if the input has any values.
I couldn't understand why you used li and p in your original code, because you need to override so much stuff to make it look nice.
Using "rem" over a fixed pixel value is also preferred if you want to create a responsive site, where you just override the font-size in the body to make everything scale.
.container {
position: relative;
display: flex;
}
body,
input {
padding: 1rem;
}
.container.selected > .todo-item,
input:focus ~ .todo-item {
transform: translateY(-1rem);
}
.todo-item {
position: absolute;
left: 1rem;
transform: translateY(1rem);
transition: transform 400ms;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
<div class="container">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
<div style="padding-top: 1rem"><-- select this input</div>
</div>
<div class="selected container" style="padding-top: 2rem">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
</div>
body {
background-color: #48AEE0;
}
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
width: 80px;
text-align: center;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.other {
margin: 0;
display: inline-flex;
flex-direction: column;
}
input {
height: 30px;
width: 200px;
border: white;
margin: 0;
}
<div class="container">
<div class="tag">spent</div>
<div class="others">
<input type="text">
</div>
</div>
I have an input box for text and directly next to it is a button. The problem is when the button font-size and input box font-size is different, the button won't be correctly aligned.
Ex - different font-sizes. Notice the bottom of the button extends past the input box much more than the top
input{
font-size:20px;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
}
<input>
<button class="btn btn-primary m-l">Add</button>
Ex: Same font sizes: button is aligned:
input{
font-size:20px;
}
.btn {
padding: 8px 12px;
font-size: 20px;
border-radius: 2px;
}
<input>
<button class="btn btn-primary m-l">Add</button>
I'm not sure this is the best solution, but you can achieve this by giving the input a height, and vertically aligning both elements to the middle. See snippet below.
input{
font-size:20px;
height: 30px;
vertical-align: middle;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
vertical-align: middle;
}
<input>
<button class="btn btn-primary m-l">Add</button>
Use CSS Flexbox. And apply align-items: center to make your child <div>s vertically centered. In my case I've used body as my parent element
Have a look at the snippet below:
input{
font-size:20px;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
margin-left: 5px;
}
body {
display: flex;
align-items: center;
}
<input>
<button class="btn btn-primary m-l">Add</button>
Hope this helps!
Simply wrap your content into a .container div and apply dispaly: flex to it and that should do the trick for you.
.container {
display: flex;
}
input{
font-size:20px;
margin-right: 5px;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
}
<div class="container">
<input>
<button class="btn btn-primary m-l">Add</button>
</div>
Hope helps (y).
I have a problem with the text after a checkbox. It is not aligned properly (the checkbox is too high) and since I am just starting to learn css and coding, I don't understand the solutions that were given to this problem on other sites. Here is an image of what it looks like right now and would appreciate any help on what to put in custom css in order to have the box properly aligned. Thank you!
https://www.dropbox.com/s/s46g9bb1u0ymrlf/checkbox.JPG?dl=0
.legal label input[type=checkbox] {
vertical-align: middle;
}
form .form-row .input-checkbox {
display: inline;
margin: -2px 8px 0 0;
text-align: center;
vertical-align: middle;
}
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox],
.radio input[type=radio], .radio-inline input[type=radio] {
float: left;
margin-left: -20px;
}
input[type=checkbox], input[type=radio] {
margin: 4px 0 0;
margin-top: 1px\9;
line-height: normal;
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
}
`
There can't be able to help without code
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
I have a car
Please check the below example
In bootstrap we can prepend an input using the following code:
<div class="input-prepend">
<span class="add-on">#</span>
<input type="text">
</div>
I want to achieve exactly the same thing in jQuery Mobile, but without using bootstrap.
I can see that the relevant CSS code from bootstrap is as follows:
.input-prepend {
display: inline-block;
font-size: 0;
margin-bottom: 10px;
vertical-align: middle;
white-space: nowrap;
}
.input-prepend .add-on {
background-color: #EEEEEE;
border: 1px solid #CCCCCC;
display: inline-block;
font-size: 14px;
font-weight: normal;
height: 20px;
line-height: 20px;
min-width: 16px;
padding: 4px 5px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: auto;
}
After adding these to my custom CSS, I still couldn't figure out what's missing. But certainly something is missing.
Can someone please guide me.
Here is the example fiddle: http://jsfiddle.net/LittleLebowski/Mgq9W/
Leave the rest of the css the same, but add this to .input-prepend .add-on rule. You could also use vertical-align:top. I tested it using your fiddle link.
.input-prepend .add-on {
vertical-align: bottom;
}
You could also try adding..
.input-prepend input {
position: relative;
margin-bottom: 0;
vertical-align: top;
}