.plus input[type="submit"]
{
background: url("../Image/button_one.png") no-repeat;
border: medium none;
float: right;
height: 32px;
margin-right: 14px;
margin-top: 53px;
width: 32px;
}
I m using following code to display the button on the image it works with all browsers but when it comes to internet explorer 7 the button get out from the image.
input[type="submit"] doesn't support by IE 7 and IE8 see here. IT would be good to make a class.
Also you are writing a css in wrong manner. It should be like this. A working Demo.
input.plus[type="submit"]
{
background: url("http://lorempixel.com/60/30/") 0 0 no-repeat;
height: 32px;
width: auto;
}
input[type="submit"]
{border:1px solid black;
width: 132px;}
Related
I'm using Contact Form 7 on a website of a client, and I styled the dropdown menu to this:
.wpcf7-form select {
-webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}
Unfortunately the arrows are missing now. Is there anyway to add an down arrow at the right side of the dropdown menu in the same color as the text? I tried different css classes found on this website, but nothing seems to work.
Image of how it displays now:
And how it should be:
The arrow could also be another arrow.
Any help would be appreciated much!
Regards,
Vasco
Here's an option for you... now... I used the span.wpcf7-form-control-wrap that was specifically around the select I was styling. You could also (instead) wrap the selects in a custom div.
This produced this result for me
I also made the triangle using clip-path, so you can change the colors or anything else.
/* Using the menu-813 which for me was the span around the select.*/
span.wpcf7-form-control-wrap.menu-813 {
position: relative;
height: 60px;
background: #e9edf0;
display: inline-block;
}
span.wpcf7-form-control-wrap.menu-813:after {
content: '';
position:absolute;
width: 15px;
height: 15px;
background: #000;
right:8px;
top: 20px;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.wpcf7-form select {
-webkit-appearance: none;
appearance: none;
color: #72858a;
font-size: 0.7777777778rem;
background-color: transparent;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
z-index: 1;
position: relative;
padding-left: 2ch;
}
My CSS style not working properly for IE 11 and Safari browsers. I searched every possible place to find an answer but failed. a lot of people talking about cross-browser CSS problem but no one did a working example and show how it's done properly. so if you guys know please help me to overcome this issue.
this is a part of my CSS I found not working for IE and safari
<style> .lap_drop_dwn:before {
content:"";
position: absolute;
right: 31px;
top: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent rgb(0,0,0,0.5) transparent;
}
.drop_dwn_items {
display: block;
width: 100%;
height: 50px;
background-color: rgb(0,0,0,0.5);
text-decoration: none;
line-height: 50px;
font-size: 22px;
color: #fff;
padding: 0 20px;
text-align: center;
}
</style>
this is a part I found, but my CSS file is quite large so there could be many so hard to find manually. it would be better if there is some script which automatically fixes those errors according to particular browser needs.
I am a novice when it comes to CSS. Have a small problem - the following code looks great in Firefox and Chrome, but not so much in IE (big surprise!). The image is basically hidden behind the double-line hr. Is there something I should try differently?
hr.style-eight {
padding: 0;
width: 100%;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr.style-eight:after {
content:url("/web_images/wheat_icon.png");
display: inline-block;
position: relative;
top: -1.25em;
padding: 0 0.25em;
background: white;
}
Thank you for your help!
I am trying to obtain a pure CSS select input with an arrow. All is well except Firefox is causing some weird issue and pushing the arrow past the width of the box.
You can see it here: http://cssdeck.com/labs/xvvfgv3k (Please view in a FF browser)
Is this some sort of bug? When viewing the css in Firebug to try and fix the problem, it fixes itself and displays how it should. Really weird. Any help is greatly appreciated. Thanks!
Try making your select element relative and adjusting the right property on your :before and :after pseudo elements.
Try this
.wrap {
width: 200px;
margin: 10% auto;
font-size: 14px;
}
select {
width: 100%;
padding:10px;
margin: 0;
border: 1px solid #bec1c3;
border-radius:0;
background: #fff;
color:#888;
line-height: 1;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
position: relative;
}
span.select {
position:relative;
padding: 9px 0;
}
span.select:after {
content:'';
width: 0px;
height: 0px;
border-style: solid;
border-width: 6px 4px 0 4px;
border-color: #bec1c3 transparent transparent transparent;
position: absolute;
right: 16px;
top: 14px;
pointer-events: none;
z-index: 100;
}
span.select:before {
content: '';
display: block;
right: 6px;
top: 0;
width: 34px;
height: 34px;
background: #F7F7F7;
position: absolute;
pointer-events: none;
z-index: 99;
}
Saucelabs shows the following browsers also show the bug you refer to :
1. Firefox 25 on windows7
2. Firefox 20 on windows7
3. Firefox 10 on windows7
4. Firefox 25 on Linux
Does this link help?
Firefox button and text input bug
This is what it looks like in chrome:
This is what it looks like in FF:
This is the css I have applied to this element:
.styled-select5 {
margin-left: 20px;
height: 12px;
border: 1px solid #cccccc;
overflow: hidden;
width: 104px;
z-index: 1;
background: url(/images/registration/triangle.png) no-repeat right white;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.styled-select5 select {
padding-right: 42px;
background: none repeat scroll 0 0 transparent;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: .01px;
text-overflow: '';
border: none !important;
width: 110% !important;
overflow: hidden;
z-index: 5;
height: 14px;
display: block;
padding-left: 3px;}
.styled-select5 select::-ms-expand{
display: none;}
.styled-select5 select option {
height: 20px;
width: 400px; }
.styled-select5.hidden {
display: none; }
I have been trying to figure this out for a while. In order for them to look similar I have to change the padding in FF to get the text to show properly. I am not sure why this is happening. Is there some difference in the way chrome and FF do this?
Each browser (on every OS) displays the HTML elements differently. The amount of styling that can override the defaults is also decided by the browser.
You cannot edit beyond what's permitted. If you happen to use selects for Safari, it'll look far more different and you cannot customize much there as well.