.checkbox input[type="checkbox"]{
display: inline-block;
width: 23px;
height: 21px;
margin: -1px 4px 0 0;
vertical-align: middle;
background: url(http://csscheckbox.com/checkboxes/u/csscheckbox_391ce065f36b1460c4845fa9b5173fba.png) top no-repeat ;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
.checkbox input[type="checkbox"]:checked{
background: url(http://csscheckbox.com/checkboxes/u/csscheckbox_391ce065f36b1460c4845fa9b5173fba.png)0px bottom !important;
}
I created a checkbox and changed it's style when I checked it image not changed.
What can I do?
Thanks ,
I resolved it by this solution
.checkbox input[type="checkbox"]{
display: inline-block;
width: 20px;
height: 20px;
margin: -1px 5px 0 0;
vertical-align: middle;
background: url(http://csscheckbox.com/checkboxes/u/csscheckbox_a967b1e8ddfb00be4a2edf9abd4371c3.png)0px top no-repeat ;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
.checkbox af|selectBooleanCheckbox::content input[type="checkbox"]:checked{
background:url(http://csscheckbox.com/checkboxes/u/csscheckbox_a967b1e8ddfb00be4a2edf9abd4371c3.png) 0px bottom !important ;
}
Related
I new to get "email address and submit" in the same line. How can I get this?
Here is my css:
.mc4wp-form-theme button, .mc4wp-form-theme input[type=submit], .mc4wp-form-theme input[type=button] {
display: inline-block;
padding: 8px 16px;
font-weight: 400;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: 0 0;
text-shadow: none;
filter: none;
height: auto;
width: auto;
}
I'm currently learning css and attempting to center the code found here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
I've tried a combination of inline-block and text-align: center, but am unable to center it so "Home", "News", "Dropdown", and "Link" are centered instead of floating towards the left.
Could someone explain what I'm doing wrong? Thank you and hopefully you had a restful weekend!
Since Elements have a float:left property you cannot center them, need to change the css as per needs
Try this new CSS
CSS
.container {
overflow: hidden;
background-color: #333;
font-family: Arial;
text-align:center;
}
.container a {
display:inline-block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display:inline-block;
overflow: hidden;
vertical-align:middle;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
I am trying to get the the menu on the right side of the search bar to breakout of the parent.
Code: http://jsbin.com/xecolubodi/edit?html,css,js,output
I believe a modified to the following css styles is required:
.mapsearch-menu ul {
display: none;
position: relative;
top: -55px;
padding: 55px 0 0 0;
margin: 0;
user-select: none;
}
.mapsearch-menu ul:hover {
display: block;
}
.mapsearch-menu li {
background: white;
padding: 4px;
list-style: none;
border: 1px solid rgba(0, 0, 0, 0.298039);
margin-top: -1px;
}
.mapsearch-menu input[type=checkbox],
input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.mapsearch-menu li:hover {
background: #eee;
cursor: pointer;
}
.mapsearch-menu .button {
display: inline-block;
user-select: none;
cursor: pointer;
height: 16px;
width: 16px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAJ0lEQVQ4y2NgGDbgJBD/JxGfQDbgOBkGHB1mYXBi6IfBmdEwIB8AAEQSURX+8q0jAAAAAElFTkSuQmCC");
}
.mapsearch-menu {
display: inline-block;
position: absolute;
top: 0;
right: 0;
margin-top: 12px;
padding-right: 5px;
}
Before click:
After click:
I want the hamburger menu icon to stay stationary and have the dropdown menu either breakout of the parent divs bounds or have the list items right justified.
I have been working on this for an hour and I am not getting anywhere. I tried various things (floating, etc).
ps: I prefer to have the search icon, the search text, and the hamburger all left-floated instead of the hack I am currently doing with padding with the search. If that is easier to fix that first then please attempt (I also been trying to fix that)
I updated your css below, It will probably work for you.
.mapsearch-menu ul {
display: none;
position: absolute; /* Add this you can change it as per you need */
top: -34px; /* Add this */
right:0px; /* Add this you can change it as per you need */
min-width:170px; /* Add this */
padding: 55px 0 0 0;
margin: 0;
user-select: none;
}
.mapsearch-menu .button {
display: inline-block;
user-select: none;
cursor: pointer;
position:relative; /* Add this */
height: 16px;
width: 16px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAJ0lEQVQ4y2NgGDbgJBD/JxGfQDbgOBkGHB1mYXBi6IfBmdEwIB8AAEQSURX+8q0jAAAAAElFTkSuQmCC");
}
.mapsearch-menu li {
background: white;
padding: 4px;
list-style: none;
border: 1px solid rgba(0, 0, 0, 0.298039);
margin-top: -1px;
display:inline-block; /* Add this */
}
I have created a responsive website about a year ago and took a Big Commerce theme and altered it to be my own. I have put a button next to a search bar in the header. To test responsiveness I zoom in and out to see what happens. When I do, the search bar and button seem to move around quite a bit and get bigger. I would like it to stay put like the header, bag button and phone number. Here is my code...
/* CSS */
#SearchForm2 {
position: absolute;
right: 0;
top: 3%;
z-index: 52;
width: 25%;
height: auto;
display: block;
}
#SearchForm2 form {
padding: 0;
margin: 0;
display: block;
}
#SearchForm2 label {
display: none;
}
#SearchForm2 input {
display: block;
height: auto;
width: auto;
font-weight: 400;
text-transform: uppercase;
padding: 2px 3px 2px 3px;
}
#SearchForm2 p {
display: none;
margin: 5px 0 0 0;
}
#SearchForm2 input.Textbox {
float: right;
font-size: 100%;
width: 59%;
height: auto;
display: block;
padding: .5em 1em;
text-transform: none;
line-height: 17px;
background-color: transparent;
border: 1px solid #000;
vertical-align: middle;
}
.searchbtn2 {
float: right;
width: 39%;
height: auto;
font-size: 100%;
display: block;
margin: 0px 3px 0 0;
cursor: pointer;
font-weight: 500;
text-transform:uppercase;
font-family: "Cabin", Arial, Sans-serif;
*display: inline;
*zoom:1;
text-align: center;
vertical-align: middle;
border: none;
padding: 5px 10px 4px 10px;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
background-color: #454545;
color: #fff;
border: 2px solid #454545;
}
.searchbtn2:hover {
background-color: #ffffff;
color: #000;
}
<!-- Header Search -->
<div id="SearchForm2">
<form action="%%GLOBAL_ShopPath%%/search.php" method="get" onsubmit="return check_small_search_form(this)">
<label for="search_query">%%LNG_Search%%</label>
<input type="text" name="search_query" id="search_query" class="Textbox autobox" value="%%LNG_Search%%" />
<button type="submit" class="searchbtn2" name="Search" title="Search">Search</button>
</form>
</div>
Here is a link to see it in action: https://www.luxuryeyesite.com/test3/
You are using a percentage for your font size. As inputs are zoomed into the percentages will also increase. If you don't want this to occur you'll need to stop using a percentage on #SearchForm2 input.Textbox and .searchbtn2
Also, this isn't the way I would recommend testing responsiveness. If you are using Chrome open the developer tools and select the 'toggle device toolbar' button to get a more accurate representation.
I have the following CSS to style a button and an anchor tag as they have the same button style but they are in different locations. SO I thought to give them the same CSS so that they would both render exactly the same. However, the button.enter has the text pushed down. The first one works fine. It would work with padding:0 but that would affect the first one.
Any ideas?
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle;
}
Just add another style that will reset the padding on the button alone. Some of your css is unrequired as well. vertical-align:middle; does nothing in this case for example.
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
}
button.enter {
padding:0;
}
You need to mention margin and padding as 0 coz button has the default margin and padding.
Add this below code
a.enter, button.enter {
text-decoration: none;
background: green url('../img/enter-button_small.png') no-repeat 0px 0px;
line-height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle; display:inline-block; padding:0; margin:0; border:none
}
Here is working demo http://jsfiddle.net/6Ygc2/