So I have styled my search form on the top banner of my blog, but when I leave the home page to another page the background image search icon disappears! Any suggestions as to why this is happening? Thanks ;-) http://demo.boxofficeboxing.co.uk
#s {
padding:8px 6px;
background:rgba(0, 0, 0, 0);
border-style: solid;
border-color: #fff;
border-width: 1px 0px 1px 1px;
font-family:open sans;
font-size:14px;
color: #fff;
}
#searchsubmit {
cursor:pointer;
position:relative;
padding:8px 16px;
left:-9px;
border-style: solid;
border-color: #fff;
border-width: 1px 1px 1px 0px;
background-color: #a88f4b;
font-family:open sans;
font-size:14px;
background-image: url('wp-content/uploads/2017/12/search.png');
background-position: center center;
background-repeat:no-repeat;
text-indent: -9999px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: white;
}
::-moz-placeholder { /* Firefox 19+ */
color: white;
}
:-ms-input-placeholder { /* IE 10+ */
color: white;
}
:-moz-placeholder { /* Firefox 18- */
color: white;
}
input:focus {
outline: none;
}
It is simple enough to crack..
The path for your image icon is set to
wp-content/uploads/2017/12/search.png
So when on home page - the url becomes
http://demo.boxofficeboxing.co.uk/wp-content/uploads/2017/12/search.png
And when on inside page - say video highlights - the url turns to be
http://demo.boxofficeboxing.co.uk/videos-highlights/wp-content/uploads/2017/12/search.png
One way to resolve the same will be set the URL in css to be
/wp-content/uploads/2017/12/search.png
That should solve your issue / probelm.
Your reference to the image is relative, so when you go to another page, it's reference is wrong. Make your background-image URL value absolute.
The url wp-content/uploads/2017/12/search.png supplied to background-image is relative, so while it works on your homepage, if for example you navigate to the /news/ section, becomes http://demo.boxofficeboxing.co.uk/news/wp-content/uploads/2017/12/search.png instead of http://demo.boxofficeboxing.co.uk/wp-content/uploads/2017/12/search.png. Just give it an absolute url complete with http://... and it should be fine.
Related
There is an embedded form on this WordPress page (by a third party plugin, Genoo) in which I'm trying to re-style. All has gone well aside from the submit button at the bottom. The button should have white text with a black background.
https://lfccworkforce.com/funding-options/fastforward/
It displays fine in Chrome:
Chrome Sreenshot
But in Safari it does not:
Safari Screenshot
I appreciate everyones help!
e.genooForm {
all: unset;
}
.genooForm label {
font-size:.9em;
font-weight: bold;
font-family: Arial, Sans-Serif;
}
.genooForm input.ext-form-input {
border: solid 1px #757575;
width: 100%;
border-radius: 5px;
margin-bottom: 15px;
}
.gn-component--selected {
all: unset;
width: 30% !important;
margin: auto !important;
}
.gn-btn {
all: unset;
text-align: center;
padding: 10px;
background: #000 !important;
color: #fff !important;
font-size: 1em !important;
font-weight: bold !important;
border-radius: 10px !important;
text-decoration: capitalize !important;
}
.gn-btn:hover {
background:#0176C0 !important;
}
.gn-generated .gn-form .gn-btn {
color: rgb(255, 255, 255) !important;
}
#www139 had the answer:
I suggest removing the all:unset; property. Only Safari 9.1 and later support it. Edge doesn't support it at all. Since it resets properties to initial, Safari might be interpreting that property differently from Chrome and setting the color of the button to its default.
I am styling input[type=range] using CSS, and done with thumb and track.
All of three(-ms, -moz, -webkit) browser have proper prefix.
But, I don't know what vender prefix is suit to style progress on Webkit browser, such as Chrome.
On Internet Explorer and Microsoft Edge, -ms-fill-lower works great.
On Firefox, using -moz-range-progress solved the problem.
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 350px;
}
/* Webkit, Chrome & Safari */
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: -7px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ddd;
}
/* moz://a Firefox */
input[type=range]::-moz-range-track {
/* width: 150px;
height: 5px; */
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
}
input[type=range]::-moz-range-progress {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
/* Microsoft */
input[type=range]::-ms-track {
height: 2px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: 1px;
}
input[type=range]::-ms-fill-lower {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
input[type=range]::-ms-fill-upper {
background: #ccc;
border-radius: 10px;
}
input[type=range]:focus::-ms-fill-lower {
background: #44ddff;
}
input[type=range]:focus::-ms-fill-upper {
background: #ddd;
}
<input type="range" />
This example will work as I expected on Microsoft Edge, moz://a Firefox, and Internet Explorer, but looks differently on Chrome.
I already read Styling input range for webkit with pure CSS , and tried on mine,
but it works strangely when multiple input[type=range]s are on one document.
So, the question is,
Is there any proper vender prefix for styling track that thumb is already passed, only using CSS?
To the best of my knowledge, this isn't possible. Below is a snippet from Chrome showing the Shadow DOM elements for <input type="range" />:
<input type="range">
#shadow-root (user-agent)
<div style="-webkit-appearance:inherit">
<div pseudo="-webkit-slider-runnable-track" id="track">
<div id="thumb">
</div>
</div>
</div>
</input>
In general, you might want to take a look at range.css, it's a cross-browser code generator for custom range sliders. However, it doesn't provide a way to style the ::-moz-range-progress region. Other example's I've found, including this Codepen snippet, use the deprecated and no-longer-functional deep shadow-piercing selector. For a fully cross-browser solution, you'll have to make your own element.
I have two sets of buttons. The first set is for navigation, the second set is for download and info.
The first set works fine, the second set works fine too, but I can't get these buttons to change when I hover over them.
Here is the code I used for the second set (this set is used with book covers):
.book_covers li .btn1,
ul li .btn2{
border-radius: 10px;
background-color: #E77600;
cursor: pointer;
width: 41%;
height: 22.5%;
padding: 0%;
float: left;
text-decoration: none;
color: #fff;
text-align: center;
font-size:80%;
cursor:pointer;
-webkit-box-shadow: inset 1px 1px 5px 2px #733B00;
box-shadow: inset 1px 1px 11px 2px #733B00;
-webkit-transition-duration:0.4s /*safari*/
transition-duration: 0.4s;.book_covers li .btn1 {
margin:0% 2% 4% 6%;
}
.book_covers li .btn2{
margin:0 5% 5% 1.5%;
}
.book_covers li .btn1 :hover {
background-color: #FFF;
color: #666;
}
.book_covers li .btn2 a:hover {
background-color: #FFF;
color: #666;
}
The page where they are used is: [link] (http://www.hoddenbagh.nl/bibleopen/subjects_eBooks.html)
Thanks guys for your responces, but I found the solution how to handle this:
.book_covers li .btn1:hover {
background-color: #FFF;
color: #000;
}
.book_covers li .btn2:hover {
background-color: #FFF;
color: #000;
}
Use 'onmouseover' event handler to get it done.
A simple example would be changing the color on moving the mouse over a button.
<button id="buttonone" type="button" onmouseover="changecolor()">Click Me!</button>
<script type="text/javascript">
function changecolor()
{
document.getElementById("buttonone").setAttribute("color","red");
}
</script>
This would change the button text color to red on hovering the mouse over the button.
Using css and js!
function changecolor()
{
document.getElementById("buttonone").setAttribute("class","somenewvalue");
}
Then use .somenewvalue in the css stylesheet to give it the required effects .somenewvalue { color:red; }
Otherwise,using the onmouseover eventhandler, you could remove the previous button and create a new button with new attributes. This can be done using the DOM functions.Add effects to the newly created button using either its 'id' or 'class' in the stylesheet. If you have so many buttons in your website(not at one place or page),then it would be better to use css alone. Js and css together would be a good choice if the effects for different buttons on your site are gonna be different. Again,if you have a lot of buttons,css alone is better. I ain't sure about how to do it with css alone.
I have a lot of forms on my website with, of course, many of the fields in them being required. If required field is left empty, it is assigned an 'error' class and I'm trying to circle the field in red regardless whether it is a text field, drop down menu or a checkbox.
I have the following code in my css file:
.error input, .error select, .error textarea {
border-style: solid;
border-color: #c00;
border-width: 2px;
}
Now strangely enough that works well in IE but in Chrome the checkboxes are not circled in red although I can see that the CSS is applied to them when inspecting the element.
And this might be irrelevant at the css code above is active but I do have something else in my css file:
input[type=checkbox] {
background:transparent;
border:0;
margin-top: 2px;
}
And that is used so that the checkboxes are displayed correctly in IE8 and less.
Any ideas how I can visualize the red border in Chrome?
EDIT:
Here's a jsfiddle:
http://jsfiddle.net/PCD6f/3/
Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):
input[type=checkbox] {
outline: 2px solid #F00;
}
Here's the jsFiddle
Specifically for a checkbox use outline: 2px solid #F00;, BUT keep in mind that the border will still be visible. Styling input fields to look them well across multiple browsers is tricky and unreliable.
For a completely custom styled checkbox, see this jsFiddle from this Gist.
EDIT Play with: outline-offset: 10px;
Check Box, and Radio Button CSS Styling Border without any image or content. Just pure css.
JSFiddle Link here
input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}
/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}
Works for me.only outline doesn't work.
input[type=checkbox].has-error{
outline: 1px solid red !important;
}
SASS inserts unexpected CSS on production server and messes up my a:hover
This is fragment of my application.css:
pre {
background-color: #eee;
padding: 10px;
font-size: 11px; }
a {
color: #000000;
}
a:visited {
color: #666666;
}
a:hover {
border-bottom: none;
}
div {
&.field, &.actions {
margin-bottom: 10px; } }
however on production server firefox reports following css:
pre {
background-color: #EEEEEE;
font-size: 11px;
padding: 10px;
}
a {
color: #000000;
}
a:visited {
color: #666666;
}
a:hover {
border-bottom: 1px solid #777777;
}
div.field, div.actions {
margin-bottom: 10px;
}
on my development machine firefox shows following CSS:
a:hover {
border-bottom: medium none;
}
I use Rails 3.2.13 and I have never seen problem like this. I have wasted whole afternoon trying to find a solution. This problem breaks my home page and makes it look very unprofessional.
First, border-bottom is a shorthand property. It combines border-bottom-width, border-bottom-color and border-bottom-style. The values of those properties can appear in any order. Any of them can be omitted.
none is a value from border-bottom-style.
Second, what Firefox shows in its inspection feature, is not exaclty your CSS. It shows what it treats the CSS like. border-bottom: medium none; means that you changed the style of border to none, while the width remains as medium (apparently, it was inherited).
To see the actual CSS, open the actual CSS file and look inside. It will also let you view media query wrappers.
Third, to remove bottom border, use border-bottom: 0;. That will be treated as border-bottom-width: 0;, which effectively removes the border.