I have put custom borders on my buttons. I clearly state a colour and it works on all browsers except for Firefox...once again Firefox is the odd one out. I am telling the border to be #252525 but it is way brighter, and when inspecting element the border colour is correct. What is causing it to be brighter?
If I change it to "red" it becomes a very bright shade of red.
(Bottom is Chrome, top is Firefox, IE + Edge are the same as Chrome)
https://gyazo.com/c32a819548a253c5502356877e7bc128
input.button {
height: 50px;
width: calc(400px / 3);
border: 0px;
float: left;
background-color: #191919;
color: #AEAEAE;
font-family: standard;
font-size: 40px;
cursor: pointer;
border-bottom: 1px solid #252525;
border-style: inset;
}
<input class="button" type="button" value="x1.5">
Related
Okay so i want to make a transparent button with some icon / text inside that, on hover, makes the text transparent and the background colored. This is "kinda" my code:
.button-color {
padding: 12px 20px;
border: none;
color: red;
background-color: transparent;
}
.button-color:hover {
color: transparent;
background-color: red;
}
<button class="button-color">Hi!</button>
(The code is way longer but you get the point)
And this is the result:
Unhovered:
Hovered:
I want the background to get transparent where the icon is. Oh and setting the icon to a certain color won't do the trick because these buttons are inside a 3D viewer that has a model loaded . I don't even know if this is achievable with pure css but who knows.
You can get this effect using blend-mode : hard-light as long as the color of the element has RGB values that are 0 or 255. (that is, primary colors).
With this blend-mode, gray (RGB values of 128) is "transparent"
.button-color {
padding: 12px 20px;
border: none;
font-size: 100px;
color: red;
background-color: gray;
mix-blend-mode: hard-light;
left: 10px;
top: 10px;
width: 200px;
}
.button-color:hover {
color: gray;
background-color: red;
}
.container {
background-color: lightgreen;
width: 200px;
}
<div class="container">
<button class="button-color">Hi!</button>
</div>
The following is my CSS code for a form's submit button:
.submit {
-webkit-appearance: none !important;
text-align: center !important;
border-radius: 0rem;
color: rgb(63, 42, 86);
display: inline-block;
float: right;
border: none;
font-size: 14px;
border-left: 0.05rem solid rgb(63, 42, 86);
width: 3.6rem;
height: 2.2rem;
line-height: 1.75rem;
transition: background-color 0.2s;
background-color: transparent;
}
After some initial formatting issues on iOS, I implemented -webkit-appearance: none which fixed most of the problems. But the "Submit" text for the Submit button is now right-aligned instead of centered on iOS, as shown in this image: http://ben-werner.com/screenshot/01.png
On the desktop version using chrome and safari however, the text displays centered as it should: http://ben-werner.com/screenshot/02.png
I don't think it is a specificity issue, as the !important declaration of text-align: center should prevent anything else in my CSS overriding it.
Does anyone have an idea what is happening on the iOS device that causes the Submit text to function differently? Any help is much appreciated, thanks!
CodePen Link: https://codepen.io/benwerner01/pen/BqErOE (Note: the html formats correctly on the CodePen site, but the same code running within safari or chrome on iOS breaks the button. I have hosted the code from CodePen at https://ben-werner.com , to demonstrate that on mobile it displays incorrectly)
Ok, I know what is happening now. You are giving your submit button a specific width and height that is affecting the text-align on iOS devices. Removed the width and height values and your text will align center on iOS devices. I would also use padding to give your button the desired width and height instead of those properties.
.submit#mc-embedded-subscribe {
border-radius: 0 !important;
-webkit-appearance: none !important;
color: rgb(63, 42, 86);
float: right;
border: none;
font-size: 14px;
border-left: 0.05rem solid rgb(63, 42, 86);
/* width: 3.6rem;
height: 2.2rem; */
text-align: center !important;
text-align: -moz-center !important;
text-align: -webkit-center !important;
line-height: 1.75rem;
transition: background-color 0.2s;
background-color: transparent;
margin: 0 auto;
}
So I have a field that is supposed to have a black outline. Like this
Where the 237 is. But here's what I have
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
outline: 3px solid black;
}
For some reason when I select the field it gets smaller. And on initial load, there's kind of like an outline around it. A grayish one. You could call it a shadow Here's a demo. Ideas?
Use border instead of outline to remove the "shadow":
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
}
JSBin: http://jsbin.com/cuwurowu/2/edit
The “shadow” is the default border of the input element. To remove it, add
.r { border: none }
(but note that this affects the totals dimensions of the element, which may matter in pixel-exact layout).
The shrinking effect in Chrome (does not seem to happen in Firefox or IE) is apparently caused by a browser default style sheet that sets outline-offset: -2px on the element when it is focused. The outline-offset sets the distance between an outline and the outer edfes of the element, so a negative value shrinks the outline. To fix this, add
.r { outline-offset: 0 }
Hi I want to change the style of the dropdown, nearer the option tags, in HTML. In Firefox it is working, but not properly in IE and google chrome.
The padding is only working in firefox. The background color is working on all browsers, but in IE you can see it, even on the selected value.
Demo with JSFiddle
Html:
<label for="locale">locale:<em>*</em></label>
<select name="locale" id="locale">
<option selected="selected">en_CA</option>
<option>en_US</option>
<option>fr_FR</option>
<option>fr_CA</option>
<option>ja_JP</option>
</select><br />
CSS:
label{
margin: 5px 0px 10px 0px;
padding: 5px;
height: 22px;
display: inline-block;
width: 100px;
}
label em{
color: red;
font-family: Arial;
font-weight: bold;
}
select{
color: #333;
margin: 5px 0px 10px -5px;
padding: 5px;
height: 32px;
width: 262px;
border: #999 1px solid;
}
select option {
padding: 5px 8px;
background: #ddd;
}
Webkit browsers (Safari, Chrome etc) don't allow padding on select elements. You can however mimic padding by manipulating the height for top and bottom padding and text-indent for left-padding.
Update: The same goes for background-color on option elements. Webkit doesn't allow that and I don't believe there's a workaround other than doing your own Javascript implementation of a drop-down using for example an unordered list and some styling.
I don't think you could just style the option tags. I think I read it from somewhere that it is based on OS or something...
in internet explorer 10 (mobile version), a selectbox () gets highlighted blue as soon as it gets focused, (it´s the blue of the whole Modern UI surface of the phone). the styles for the select tag:
border-radius: 5px 5px 5px 5px;
font-size: 14px;
height: 25px;
letter-spacing: -1px;
float: left;
font-weight: 400;
padding: 0 5px 0 5px;
-webkit-appearance: none;
-ms-user-select: none;
background-origin: content-box, content-box;
background-repeat: no-repeat, repeat;
background-size: 11px 6px, 1px 160px;
background-position: right center, 0 -1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMAQMAAACz9bS7AAAABlBMV…vQuZgJjsYojkBJQf75i4cGzcXt5HJQ/Djs7L5sApGeVNPJDzbGEbOb/85rAAAAAElFTkSuQmCC), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAlgCAIAAADGR8ryAAACZ0lEQ…tDzV5P+JnOAzg9qR2Xlg+a8jAvtyK/P5fSI6Sf3c3NhwADAJ0Rj8qbukvYAAAAAElFTkSuQmCC);
border: 1px solid #CCCCCC;
I was hoping the "-ms-user-select: none" would fix it, but didnt.. Has anyone experience similar?
I've encountered a similar problem on WP7 an WP8, the solution is to move focus from select box to fake input on click event.
jQuery:
$('select').on('click', function() {
$('input.fakeInput').focus().blur()
})
CSS:
.fakeInput {
display: block;
width:0;
height:0;
top: -999rem;
position: absolute;
}
Note: do not forget to add this code only for mobile device, on desktop browsers it will work not as expected.
IE has its own CSS pseudo-element to deal with this highlight.
CSS:
select::-ms-value{ background-color: transparent; color: black; }
You may read more about this on this page.
it´s interesting but since I add this line to my style sheet, it keeps highlighting blue, but doesn´t stay that way after you select something from the selectbox.
Thought I add it as an answer if somebody comes back with the issue.
:focus{outline: none;}