I face a problem with checkbox in IE and Edge, namely a "content" class. I have the following code:
<input id="checkbox" type="checkbox" class="checkbox-edit-article" name="breakingNews" ng-model="showPublished" ng-change="updateCategory(selectedCategory, pageID)">
<label for="checkbox" class="checkbox-edit-article-label">
Show only published articles
</label>
</input>
When field is checked
.checkbox-edit-article:checked + .checkbox-edit-article-label:before {
content: url(../img/mark-white.png);
background: rgb(49,119,61);
color: #fff;
height: 44px;
line-height: 2.4;
transition: all .2s;
}
and static
.checkbox-edit-article + .checkbox-edit-article-label:before {
content: '';
background: #fff;
border: 1px solid #BFBFBF;
display: inline-block;
vertical-align: middle;
width: 43px;
height: 44px;
margin-right: 10px;
margin-top: 1px;
text-align: center;
box-shadow: inset 0px 0px 0px 1px white;
}
In Chrome content: url(../img/mark-white.png); is displayed perfectly, but in IE this check image is too high because of line-height, but I don't know how to center the picture in the checkbox.
I ask your help, how I can align the image?
Thank you in advance!
You put your image in background instead, like this
background: rgb(49,119,61) url(../img/mark-white.png) no-repeat center center;
Sample snippet
.checkbox-edit-article:checked + .checkbox-edit-article-label:before {
content: '';
background: rgb(49,119,61) url(http://i.stack.imgur.com/NOQI7.png) no-repeat center center;
background-size: 25px 25px; /* this I just added to make my bigger mark be small */
color: #fff;
height: 44px;
transition: all .2s;
}
.checkbox-edit-article + .checkbox-edit-article-label:before {
content: '';
background: #fff;
border: 1px solid #BFBFBF;
display: inline-block;
vertical-align: middle;
width: 43px;
height: 44px;
margin-right: 10px;
margin-top: 1px;
text-align: center;
box-shadow: inset 0px 0px 0px 1px white;
}
<input id="checkbox" type="checkbox" class="checkbox-edit-article" name="breakingNews" ng-model="showPublished" ng-change="updateCategory(selectedCategory, pageID)">
<label for="checkbox" class="checkbox-edit-article-label">Show only published articles</label>
Related
I'm a new to css and i really can't fix all as i want...
How can i align vertical the h1 to the start of user form?
but most important problem for me is that i can't center good the check and the link, i want it one below the other and centered in the div.
I'm not sure if i have positioned good the div but i want it centred but not too low on the page.
thanks to everyone!
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
input[type=text],
input[type=password]{
width: 65%;
display: table;
margin: 0 auto;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
width: 65%;
height: 20%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display:block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<!DOCTYPE html>
<head>
</head>
<body>
<div class="container">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
<hr>
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</body>
</html>
If you set the h1 to the same width of the button and use "margin: 0 auto" to center it, this will make the h1 span the width of the button, and by default the text will be left aligned to the start of the button.
h1 {
font-size: x-large;
width: 65%;
margin: 0 auto;
}
I'm not too sure exactly what you want to do with the check section. If you use "text-align: center", this will center it, or use the same code as above to align it with the buttons.
you can use text-align: center; and vertical-align:top;
If your problem still exists, please explain more clearly what you want.
Use text-align: center; to center text within container.
To make it easier to align your elements, just wrap them into one div and adjust the div with CSS instead of dealing with each single element.
Here is an example of what you can do.
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
.form {
width: 75%;
margin: auto;
}
.form-bottom {
text-align: center;
}
input[type=text],
input[type=password] {
display: table;
margin: 0 auto;
width: 100%;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
height: 20%;
width: 100%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display: block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<body>
<div class="container">
<div class="form">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
</div>
<hr>
<div class="form-bottom">
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</div>
</body>
I am making a styled rounded checkbox for woocommerce . The Problem is my checkbox is now fill inside . How Can I make it thin inside without filling?
input#createaccount:checked {
background-color: #253849;
}
input#createaccount{
position: relative;
margin-left: 4px;
width: 25px;
float: left;
margin: 2px 10px 2px 1px;
height: 25px;
border-radius: 50%;
vertical-align: middle;
border: 4px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
One way to do this without javascript would be to create one wrapper element with input and one more element as a indicator for checkbox state. That way you can use selector input:checked + nextElement and change style of second element based on checkbox status.
Then you just have to hide checkbox with opacity: 0. With this approach you can also use transitions and transforms on the inner element.
.checkbox-el {
position: relative;
margin-left: 4px;
width: 25px;
float: left;
margin: 2px 10px 2px 1px;
height: 25px;
border-radius: 50%;
vertical-align: middle;
border: 2px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
padding: 5px;
}
.checkbox-el input {
width: 100%;
height: 100%;
position: absolute;
top: -3px;
left: -3px;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.checkbox-circle {
position: relative;
border-radius: 50%;
width: 100%;
height: 100%;
z-index: 1;
transform: scale(0.5);
transition: all 0.25s ease-in;
}
.checkbox-el input:checked + .checkbox-circle {
background-color: #253849;
transform: scale(1)
}
<span class="checkbox-el">
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
<div class="checkbox-circle"></div>
</span>
Simple adding inner shadow solve the issue
box-shadow: inset 0px 0px 0px 5px #ffffff;
input#createaccount:checked {
background-color: #253849;
box-shadow: inset 0px 0px 0px 5px #ffffff;
transition: 0.5s;
}
input#createaccount{
position: relative;
margin-left: 4px;
width: calc(3em - 4px);
height: calc(3em - 4px);
float: left;
margin: 4px 10px 2px 1px;
border-radius: 50%;
vertical-align: middle;
border: 5px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
transition: 0.5s;
}
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
Here is another trick with a simple background where you color the content-box and you animate the padding. You will also have transparency:
input#createaccount:checked {
padding:3px;
}
input#createaccount {
width: 25px;
float: left;
margin: 2px 10px 2px 1px;
height: 25px;
border-radius: 50%;
vertical-align: middle;
border: 4px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
box-sizing:border-box;
background: #253849 content-box;
padding:8.5px; /* 25/2 - 4 */
transition:0.3s all;
}
body {
background:pink;
}
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
I get a space between my wrapper and the top of the page. I've tried a lot of fixes, but none that works.
The background image covers the background and is aligned to the top, but the wrapper, which has another background, seems to have a margin..
body {
height: 100vh;
background: url("https://i.imgur.com/HgflTDf.jpg") 50% fixed;
background-size: cover;
}
.wrap {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
background: rgba(17, 71, 114, 0.85);
top: 0;
}
.login {
border-radius: 2px 2px 5px 5px;
padding: 10px 20px 20px 20px;
width: 90%;
max-width: 320px;
background: #ffffff;
position: relative;
padding-bottom: 80px;
}
input {
display: block;
padding: 15px 10px;
margin-bottom: 10px;
width: 100%;
border: 1px solid #ddd;
transition: border-width 0.2s ease;
border-radius: 2px;
}
input:focus {
outline: none;
color: #444;
border-color: 2196F3;
border-left-width: 35px;
}
.fa {
color: #fff;
font-size: 1em;
position: absolute;
margin-top: -47px;
opacity: 0;
left: 0;
transition: all 0.1s ease-in;
}
.fa:focus {
opacity: 1;
left: 30px;
transition: all 0.25s ease-out;
}
.tittel {
color: #444;
font-size: 1.2em;
font-weight: bold;
margin: 10px 0 30px 0;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.sub {
width: 100%;
height: 100%;
padding: 10px 10px;
background: #2196F3;
color: #444;
display: block;
border: none;
margin-top: 20px;
margin-bottom: 0px;
position: absolute;
left: 0;
bottom: 0;
max-height: 60px;
border: 0px solid rgba(0, 0, 0, 0.1);
border-radius: 0 0 2px 2px;
transform: rotateZ(0deg);
transition: all 0.1s ease-out;
border-bottom-width: 7px;
}
footer {
display: block;
padding-top: 50px;
text-align: center;
color: #fff;
font-weight: normal;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
font-size: 0.8em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<div class="wrap">
<form action="" method="post" class="login needs-validation" novalidate>
<h4 class="tittel">Login</h4>
<input type="text" name="username" value="" placeholder="Username" required autofocus/>
<i class="fa fa-user"></i>
<input type="password" name="password" placeholder="Password" required>
<i class="fa fa-key"></i>
<input type="submit" class="sub" value="Login">
</form>
<footer>Company name</footer>
</div>
EDIT: The wrapper seems to be placed 30-40px below the top. The page can be scrolled down this exact length. Tried removing the padding in the .wrap, comment out the background for the body and played around in site inspector for Chrome, disabling and enabling css to see if any of it makes a difference, which it doesn't.
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0;
padding: 0;
...
}
But if you have a large project and want to be more complete, use normalize.css. It resets a lot of default values to be consistent across browsers.
Credits to Jon Egeland
You have 20px padding in your wrap class, removing it will probably solve your issue -
Hope this is what you're looking for!
This works for me just fine, no padding needed:
.page-wrap {
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: left;
overflow: hidden;
margin: 0 auto;
}
I am center aligning inline-block elements by using a 50% margin and transformation.
When I add transform: translateX(-50%); it causes a thin border to appear on the left side of my divs (its a little hard to see but its on the left of 'all' and left of the 'search products').
If i try changing the translate to diffrent percentages it stays; sometimes the border gets thicker when i change the percentage. Anyone know why this could be happening?
Here is my code incase i missed something that might be important:
HTML:
<div class="tabs">
<a class="tab active">All</a>
<a class="tab">New</a>
<a class="tab">Popular</a>
<i class="fa fa-search"></i>
<div class="search-input active">
<%= text_field_tag :term, params[:term], placeholder: "Search products..." %>
</div>
</div>
CSS:
.tabs {
display: inline-block;
vertical-align: bottom;
margin-left: 50%;
transform: translateX(-50%);
}
.tabs .tab {
margin-right: 32px;
color: #92969c;
height: 40px;
line-height: 40px;
text-decoration: none;
display: inline-block;
vertical-align: bottom;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
}
.tabs .tab.active {
color: #25282c;
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
border-bottom: 2px solid #25282c;
}
.search-input {
display: inline-block;
max-width: 240px;
padding: 0 32px 0 10px;
height: 40px;
position: relative;
}
.search-input input {
outline: none;
height: 40px;
width: 100%;
border: none;
padding: 0;
}
.search-input.active {
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
}
EDIT: It seems like the issue is happening because of my box-shadow code:
.search-input.active {
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
}
But i dont want to have to remove my box shadow to fix this...
This is a known bug with translate in transforms, and the solution is the null translation hack:
.tabs {
display: inline-block;
vertical-align: bottom;
margin-left: 50%;
translateX(-50%) translate3d(0,0,0);
}
By adding translate3d(0,0,0) to your element, you can fix your box shadow problem without removing them!
It seems you want it to be a border
By changing
.search-input.active {
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
}
to
.search-input.active {
border-bottom: 2px solid #25282c;
padding-bottom: 0px;
}
You will get the same result without the faded line on the side.
Instead of using a shadow to make that border wider, without causing the other tabs to move down, you can add a transparent bottom border to all of them and change its color just on the active one.
Also, you can use Flexbox instead of translate to horizontally center the menu.
Any of these options alone would fix your problem. Here's an example using both:
.tabs {
display: flex;
justify-content: center;
font-family: monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
}
.tab {
margin: 0 16px;
color: #92969c;
height: 40px;
line-height: 40px;
text-decoration: none;
vertical-align: bottom;
cursor: pointer;
border-bottom: 4px solid transparent;
}
.tab.active {
color: #25282c;
border-bottom-color: #000;
}
.tab:hover {
border-bottom-color: cyan;
}
.search-input {
max-width: 240px;
padding: 0 32px 0 16px;
height: 40px;
position: relative;
border-bottom: 4px solid transparent;
}
.search-input.active {
border-bottom-color: #000;
}
.search-input input {
outline: none;
height: 40px;
width: 100%;
border: none;
padding: 0;
font-family: monospace;
font-size: 12px;
letter-spacing: 1px;
}
<div class="tabs">
<a class="tab active">All</a>
<a class="tab">New</a>
<a class="tab">Popular</a>
<div class="search-input active">
<input type="text" />
</div>
</div>
I had the same issue and the ticked solution didn't helped me so I used margin-left 100% - a couple of percentage for this to work
Before
transform: translateX(100%); top: 0; right: 0;
After
top: 0; margin-left: 97%;
and this worked for me
I have a search text field. How can i place another search icon in search textfield?
Like one in this Image:
I need this Magnifying Button in my Textfield ( Which will be click-able )
Here is my Search Field: http://jsfiddle.net/ULtH4/
Here is my Code :
HTML:
<input type="text" name="search_people" placeholder="Search for people..." class="search_container_textfield" size="30" value="" id="inputString" />
CSS:
.search_container {
background-color: #FFFFFF;
width: 500px;
border-radius:5px 5px 5px 5px;
border:solid 1px #DFDFDF;
padding:2px;
}
.search_container_textfield {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-radius: 5px 5px 5px 5px;
float: left;
font-size: 13px;
height: 23px;
padding: 6px 4px;
position: relative;
width: 496px;s
}
.search_container_text {
color:#006666; font-size:13px; font-weight:normal;vertical-align:top !important;
}
Here's a Fiddle
<div class="search_container">
<input type="text" name="search_people" placeholder="Search for people..." class="search_container_textfield" size="30" value="" id="inputString" />
</div>
.search_container_textfield {
border: 1px solid #ccc;
border-radius: 5px 5px 5px 5px;
float: left;
font-size: 13px;
height: 23px;
padding: 6px 4px;
position: relative;
width: 496px;
}
.search_container_textfield:focus {
outline: none;
box-shadow: 0 0 2px 1px #00aeff;
}
.search_container a {
background: url(http://www.extendcomm.com/wp-content/themes/extendcomm/images/icons/icon-search.png) center no-repeat;
background-size: 30px 30px; /* background-size added because original icon is 128x128px */
display: block;
position: relative;
width: 37px;
height: 35px;
float: right;
margin: -37px -6px 0 0;
padding-left: 3px;
border: 1px solid #ccc;
border-radius: 0 5px 5px 0;
}
.search_container a:hover {
background: #e8e8e8 url(http://www.extendcomm.com/wp-content/themes/extendcomm/images/icons/icon-search.png) center no-repeat;
background-size: 30px 30px; /* background-size added because original icon is 128x128px */
}
Final result
And if you want to search id's from search filed below is jQuery solution
$(function() {
$('.search_container a').hover(function() {
var id = $('.search_container_textfield').val();
$(this).attr('href', 'search_people.php?id='+id);
});
});
You can wrap a <span> around the input and then use span:after to content to it, position it absolute and align it to how you want.
Fiddle here All you need to do is change 'Search' for an icon.
Here is another method I done, which supports 'fontawesome-' fonts.
This link here has an icon (Which is clickable too)