I have <button> tag that have <i> element for displaying icon before text.
Here's the HTML
<button>
<i></i>
Login Using Facebook
</button>
the inside <i> is for displaying icon. Usually for other tag like <a>, I can just use :before pseudo-class to display icon, but it seems I can not do this for <button> tags.
and here's the CSS
button {
background: #4a6ea9;
color: #fff;
font-weight: bold;
line-height: 24px;
border: 1px solid #4a6ea9;
vertical-align: top;
}
button i {
background: url('http://icons.iconarchive.com/icons/danleech/simple/24/facebook-icon.png');
display: inline-block;
height: 24px;
width: 24px;
border-right: 1px dotted #fff;
}
Here's the fiddle
http://jsfiddle.net/petrabarus/SDh3M
The first initial display in my Chrome 28.0.1500.95 for Linux is like below
looks a little bit imbalance on the top and bottom (I'm not a designer nor I am a front-end engineer but I can just sense that it's quite imbalance), so I can simply add padding padding: 4px 6px 1px 6px; and then it looks more balanced like below in my Chrome (does it look different in yours?)
although, I don't know why the tag seems to add padding for the icon and the text. I set the icon's size to 24x24px and the text's line-height to 24px but the final height of the button is 32px. Is it possible to remove the padding?
And the biggest problem is in the Firefox (my version is 17.0.1 for Linux), the text seems to be displayed near to the bottom and it looks so imbalance
the padding addition to fix the Chrome's makes it even worse for the Firefox's.
Is it possible to make it look exactly the same in both browsers (and pretty much for other modern browsers like Opera and Safari)?
Try below css.
button i {
background: url("http://icons.iconarchive.com/icons/danleech/simple/24/facebook-icon.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
border-right: 1px dotted #FFFFFF;
display: inline-block;
float: left; /*New Edit*/
height: 24px;
width: 24px;
}
Related
How do you do?
I have converted XD file to html, css code.
I checked on my PC(windows), but I didn't check on Macbook.
Details:
I coded button and used pseudo element to display right arrow at the right side.
Here is my code.
HTML
<button class="register btn-top-register">Register</button>
CSS
.register{
background-color: #FF6D1F;
border-radius: 10px;
color: white;
padding: 20px 50px;
margin-right: 5%;
border: none;
position: relative;
box-shadow: 1px 5px 0px #8b3507;
}
.register::after{
content: '\1F892';
width: 20px;
height: 20px;
position: absolute;
right: 0;
}
This register button displayed triangle on Windows, but step shape on Macbook.
I tried many times to fix difference.
Could you help me how to fix and display the same shape-triangle?
You can use browserstack to test your code in different devices such as mac and ios
Have a look at these unicodes https://www.toptal.com/designers/htmlarrows/.
If you want to use of unicode I don't know exactly.
I suggest you to use SVG or img to display an icon on your button.
You can download an SVG icon from flatiIcon, or you can use of featherIcon or font awesome for example.
I am trying to style the Textarea's resizer in the dark mode of my website so that it is not a white block in an otherwise dark website. As such, I tried to both use ::-webkit-scrollbar-corner and ::-webkit-resizer, although the first one leaves white corners (see screenshot), while the other one removes the characteristic two lines from the resizer. I know these changes will affect only Webkit and Blink based browsers, thus not IE, older versions of Edge and Firefox. Is there a way I can style ::-webkit-scrollbar-corner to avoid having those white corners? I want to avoid adding custom wrappers with custom scrollbars as much as I can, as it would take me way longer and add unnecessary complexity.
Here is a minimal example to reproduce the issue:
::-webkit-scrollbar-corner {
background-color: red;
}
::-webkit-scrollbar {
background-color: green;
}
textarea {
background-color: black;
color: white;
}
<textarea>
Hello
World
</textarea>
Update: To clarify, I still need the textareas to be resizable, I want to know if there is a way to remove the white top and left borders from the resizer without styling ::-webkit-resizer which would mean using an SVG to have the two lines typical of the resizer, as in the image.
It's because the textarea can be resized, so the bottom right corner is resizing box.
You can remove it by setting the resize property of textarea as none;`
I think you can do like this.
::-webkit-scrollbar-corner {
background-color: red;
}
::-webkit-scrollbar {
background-color: green;
}
::-webkit-scrollbar-thumb {
background-color: #002200;
border-radius: 20px;
border: 3px solid transparent;
background-clip: padding-box;
}
textarea {
background-color: black;
color: white;
resize: none;
width: 100%;
height: 100px;
}
<textarea>
Hello
World
</textarea>
I have a form with a submit button that I'm trying to change the color to. This should be very simple, but my css isn't working and I can't figure out why.
The CSS:
input[type="submit"]{color: red;}
Fiddle:
https://jsfiddle.net/zn7xrv60/
This is driving me nuts, any help would be appreciated.
The problem is in your input text shadow, try changing it like below then make changes what you want it to be.
From
input{
color: #f08200;
text-shadow: 0px 0px 0px #000;
-webkit-text-fill-color: transparent;
}
To
input{
color: #f08200;
text-shadow: 0px 0px 0px red;
-webkit-text-fill-color: transparent;
}
.login_content .container input[type="submit"] {
background: red;
}
If you examine that input, you'll see it's taking its color from the following code block, which has more specific selectors:
.login_content .container input[type="submit"]{
width: auto;
padding: 10px 50px;
border-radius: 25px;
background: #e8e8e8;
color: #c5c5c5;
text-transform: uppercase;
border: none;
cursor: pointer;
}
Also, this rule on the input tag, says the text color should be transparent:
-webkit-text-fill-color: transparent;
Here's your jsFiddle with red text.
Use your browser's dev tools to for this type of debugging.
since your login button is disabled at the time you need to do something like this.
.login_content .container .submit input:disabled {
//css
}
It seems there are two issues.
The first is what Tieson T mentioned in his comment. Which is that your selector is being over written by a more specific selector. This can be "fixed" by using "!important" which isn't a preferred, but is an easy way around an issue like this.
The other issue is that the submit button requires you to set the text-shadow. Try this out:
input[type="submit"]
{
color: red !important;
text-shadow: 0px 0px 0px red !important;
}
This CSS rule is what is causing you to have to override the text-shadow:
input{
color: #f08200;
text-shadow: 0px 0px 0px #000;
-webkit-text-fill-color: transparent;
}
So another option is to remove the text shadow property from this rule, and then you won't need it specified in the first rule.
UPDATE
As Chava G, pointed out in the comments another reason the color is not showing is because -webkit-text-fill-color is set to transparent.
Additionally, since the text shadow has no vertical or horizontal offset the shadow wouldn't be visible if the -webkit-text-fill-color was not transparent.
The input css rule above is a little "confused", it sets the "color" property which might imply you want the text a certain color, but then applies a text shadow that would be hidden behind the text. Followed by that it makes the text itself transparent, so it's no longer hiding the shadow which is a different color than what was set for the "color" property.
I am using CSS to make input button look like a link.
I've styled it like this:
input#linkLike {
background: none;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
display: inline;
vertical-align: baseline;
}
This works fine in Chrome, but there is a whitespace around button in Ff and an even larger whitespace in IE.
http://jsfiddle.net/S4nF9/5/
Where this whitespace comes from, and how can I remove it?
According to this page,
Firefox uses pseudo-elements within the button elements themselves for drawing. As you can see above, this means that padding of 2px is added to the top and bottom of this inner pseudo-element, therefore it may be removed as follows:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
So that's Firefox taken care of. See new fiddle.
(Note: the article mentions top and bottom, but it also works for the left and right padding.)
I don't have IE here, so I can't test that now, sorry.
You could give it a width value.
I'm running into an issue on my personal splash page with a handwritten Google webfont, Meddon. What's happening is that, seemingly at random, Webkit browsers (Chrome, Safari, iOS Safari) are clipping the left side of the font.
You can see the issue on my personal page. The left side of the JH will appear/disappear at random, when refreshing or resizing the page.
Anyone know of a solution for this? Even better, does anyone know what's causing this behavior?
It is because your jh container width is not sufficient, take a look here
Demo
Update .jh class like this - Working Demo
.circle .jh {
margin-top: 50px; /* You can adjust this */
font-family: "Meddon";
font-size: 75px;
width: 200px;
height: 120px;
text-align: center;
color: #f2f2f2;
text-shadow: 1px 1px #ff8e00;
border: 1px solid #ff0000;
}