I want to update style.css of mywebsite , it is working on most of the part but there is specific issue with search icon. I put related photos to attachment highlated with yellow as you may see I can do it on browser but when I change it on style.css it is not working, coming as older. By the way I changed search box by style.css without any issue. Style.css code are below.
Could you please help on this, is there anything that I miss.
form.search-form [type="submit"] {
border: none;
cursor: pointer;
padding: 0 16px;
line-height: 38px;
height: 65px;
vertical-align: middle;
position: absolute;
top: 0;
right: 0;
}
This mostly occurs when your current css code cannot override the default css code applied on the element by default.
To override the default code, you can simply use !important and add it in front of the css code you want to use.
form.search-form [type="submit"] {
border: none;
cursor: pointer;
padding: 0 16px;
line-height: 38px;
height: 65px !important;
vertical-align: middle;
position: absolute;
top: 0;
right: 0;
}
Related
I seem to be having an issue with some CSS on our live platform.
We have an add to cart button which is pulling changes from 'index' rather than our css that we're pushing through.
This code seems to work fine on both our staging and live platforms:
.single-product div.product form.cart .quantity {
float: initial;
}
.single-product div.product form.cart .button {
float: initial;
margin-top: 30px;
padding-right: 158px;
background-color: #ff63b1;
}
However, it seems that when we trying to change .added_to_cart.alt, .button.alt,
button.alt, input[type=button].alt, input[type=reset].alt,
input[type=submit].alt { it doesn't get recognised as if the code is incorrect and continues to pull from index.
This is the change we're trying to do which works fine on staging but not on live:
.added_to_cart.alt, .button.alt, button.alt, input[type=button].alt,
input[type=reset].alt, input[type=submit].alt {
font-size: 18px;
font-family: Georgia;
letter-spacing: 1px;
line-height: 20px;
font-style: normal;
font-weight: 700;
text-decoration: none;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 15px;
padding-bottom: 19px;
padding-left: 158px;
padding-right: 100px;
color: #fff;
border-width: 0;
border-radius: 0;
border-style: none;
border-color: #62b237;
background-color: #47a332;
}
Our staging platform is a recent copy of our live (3 days ago) and no major changes have happened since our last copy. While checking inspect, it looks like the elements are the same and there isn't any errors in the console.
I've tried turning off our caching plugins on live and also removing my own browser history but this didn't work. I'm quite stuck now and could really do with some help.
If you want to check the code yourself, here is a link to our product page:
http://www.cutepinkboutique.com/product/selfish-love-heels/
You didn't link the CSS file correctly. This is what it looks like:
http://www.cutepinkboutique.com/?sccss=1&ver=4.7.5
how can I make a custom checkbox with css only (no JS no JQ) with content:"on" when checked and content:"off" when uncheked.
Thanks.
reedit
OK, after LOT of copy/paste/delete, it work now.
Thank.
input[type=checkbox] {
position: relative;
visibility: hidden;
cursor: pointer;
}
input[type=checkbox]:after {
display: block;
content: "OFF";
position: absolute;
top: 0;
right: -30px;
visibility: visible;
height: 30px;
line-height: 30px;
width: 50px;
text-align: center;
border-radius: 4px;
background: #d00;
color: #fff;
font-weight: 600;
cursor: pointer;
}
input[type=checkbox]:checked:after {
content: "ON";
background: #0a0;
}
<input type="checkbox" />
It is possible. Check out these blog posts by Ryan Seddon. He explain how you can play with checkbox and CSS
http://www.thecssninja.com/css/custom-inputs-using-css
http://www.thecssninja.com/css/futurebox3
http://www.thecssninja.com/css/css-tree-menu
Creating an actual element with CSS isn't possible. You can however style a checkbox using css.
An example:
input[type=checkbox] {
outline: 2px solid #f00;
}
Relying on pure CSS is also a give-or-take when dealing with different browsers and platforms. I hope this answers your question.
I believe this is impossible with just css. Css decorates a html element and does not change its properties. If you click the checkbox, the box will have to do a postback to show it on the page. In which case the css will be the same. You need javascript.
What makes you not want to use javascript?
Check out this code sample of a button and an anchor: http://jsbin.com/ecitex/2/edit
I'm trying to make them identical in all browsers. But differences remain, and different differences in every browser (tried Chrome, Safari, Firefox, IE8).
Which CSS normalizations am I missing?
Update:
Per suggested:
I added line-height: 50px (although my user agent's (Chrome's) default line-height for button elements is normal, and still it vertically centers text – how?!)
I added cursor: pointer to normalize mouse cursors.
http://jsbin.com/ecitex/11/edit
So, now check out the result in Firefox: notice the padding on the button?
Then check out the result in IE8: whoa, notice how the two are completely and utterly different?!
Update 2:
It seems that IE's problems are known and non-resolvable: http://www.quirksmode.org/css/tests/mozie_button2.html
I haven't found anything on Firefox's padding though. (The quirksmode article mentions an issue with Mozilla, but that's a different issue.)
Update 3:
Awesome, we fixed the Firefox issue: http://jsbin.com/ecitex/15/edit
Okay, so far every single answer has been providing part of the solution so there's not really one single best answer. I'll grant the best answer to the person that either:
Explains why we have to specify a line-height: 50px to vertically center text in an a, while a button has vertically centered text with a mere line-height: normal.
Provides a solution for the IE issue.
You can remove that extra padding in Firefox by using:
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Here's a good explanation from Eric Meyer about line height which hopefully explains why you need to explicitly set it as 50px: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/.
Here's some new CSS that fixes the font size issue in IE:
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0px;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px;
cursor: pointer;
font-size: 100%;
}
button {
#width:0px;
overflow: visible;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
You need to use line-height property to bring your anchor tag text vertically centered
Demo
CSS
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px; <-------- Here
}
add the attribute cursor:pointer; in order to add a pointer when the mouse is hover (the input not always have it)
and at last use line-height:46px; for the vertical align
the full code is here -> http://jsbin.com/ecitex/10/edit
I am using a custom select/dropdown menu per the solution here: https://stackoverflow.com/a/10190884/1318135
This functions great, except that the options only display if you click on the box. Clicking on the 'arrow' on the right does not bring up the dropdown options. What's a workaround?
http://jsfiddle.net/XxkSC/553/
HTML:
<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
CSS:
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
}
.no-pointer-events .custom-select:after {
content: none;
}
Depending on your client base,
One very simple bit of code:
pointer-events:none;
See the browser support here: http://caniuse.com/pointer-events
Edit: just in bed and possibly thought of another solution but can't test on my phone, but maybe the jQuery mousedown trigger could be an option, to momentarily hide the arrow a split second before the click, maybe?
Or this, not sure how it'd be used, but saw it in another thread:
$('#select-id').show().focus().click();
If I was at my pc I'd test it...
That's nice. Thanks for the info. Like the use of content. Don't have an Android but from what I'm seeing in Mac on FF, Saf, and Chrome it works pretty good. May try adding:
-moz-border-radius: 0px 20px 20px 0px;
-webkit-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px;`=
to it to .custom-select:after to align the borders.
I used below code for customize the file input type,
<form class="example" action="#">
<!--<input type="file" class="required-entry filename file" name="filename[]" />-->
<div class="fileinputs">
<input type="file" class="file hidden">
<div class="fakefile"><input><img src="ravi/images/button_select.gif" /></div></div>
</form>
style.css
<style type="text/css">
body{
color: black;
font-family: arial;
font-size: 13px;
}
form.example input {
background: url('ravi/images/input_boxes.gif') no-repeat 0 -58px;
border: none;
width: 241px;
height: 20px;
padding-left: 3px;
padding-top: 3px;
}
form.example input:focus {
background-color: transparent;
}
form.example div.fileinputs {
position: relative;
height: 30px;
width: 300px;
}
form.example input.file {
width: 300px;
margin: 0;
}
form.example input.file.hidden {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
form.example div.fakefile {
position: absolute;
top: 0px;
left: 0px;
width: 350px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
form.example div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
}
</style>
and the page display like below,
when i click select button the browse folder appears and then i select the image file.but in input filed the uploaded image caption not displayed..
i integrated this one from http://www.quirksmode.org/dom/inputfile.html
what is the issue?
You need to add JavaScript code as explained on the page you cited.
If the code you use in testing consists essentially of the HTML and CSS code that you posted, then you are using the “pure CSS” version of the approach described on the page. In the numbered list that explains the basic version, which uses JavaScript too, item 5 describes the feature that is missing from the “pure CSS” version. And that feature is “When the user has selected a file, the visible, fake input field should show the correct path to this file”.
(It won’t actually show the correct path. For security reasons, browsers don’t disclose the real path. But they do let you show the filename part.)