I'm trying to get an inset effect on buttons through CSS. In Firefox this looks like in the first image, in Chrome like the second. I do not understand why and how to resolve this. Can anybody please give me a hint on what's going on? Thanks.
Firefox
Chrome
Here's the markup:
<div id="controls">
<div class="musicStyles"><span class="btnLetter">S</span>
<input type="checkbox" class="box"data-value="Classic" data-key="83">
</div>
</div>
Here's the CSS:
.btnLetter {
font-family: 'Courier New', Courier, monospace;
font-size: 100px;
text-align: center;
display: inline-block;
margin: -7px 4px 0 0;
color: transparent;
background-clip: text;
text-shadow: 2px 4px 3px #805235;
background-color: black ;
font-weight: bold;
}
#controls {
width: 100%;
height: 200px;
text-align: center;
margin-top: 300px;
position: relative;
}
the problem is chrome is not understanding the background-clip in css portion.
So provide it like this
-webkit-background-clip: text;
-moz-background-clip: text;
instead of
background-clip: text;
Related
am facing one issue on gradient css on web and android devices text are visible but on Safari its not showing at all. Please have look on both the screen shots.
I've checked with caniuse.com, and both -webkit-text-fill-color and background-clip: text are said to be supported both in Safari/Desktop as well as Safari/iOS.
.gradient-effect {
background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%);
-webkit-text-fill-color: transparent;
width: max-content;
background-clip: text;
-webkit-background-clip: text;
}
.mine-box-title {
font-family: Poppins;
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 44px;
display: flex;
align-items: center;
letter-spacing: -0.01em;
}
<h2 class="mine-box-title gradient-effect">25 MILLION</h2>
There is an unresolved, open issue about this on the WebKit Bugzilla since 2017: background-clip:text doesn't work with display:flex. Apple has ignored this bug for 4 years, it will probably never be resolved.
Remove display: flex and it works:
.gradient-effect {
background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%);
-webkit-text-fill-color: transparent;
width: max-content;
background-clip: text;
-webkit-background-clip: text;
}
.mine-box-title {
font-family: Poppins;
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 44px;
letter-spacing: -0.01em;
}
<h2 class="mine-box-title gradient-effect">25 MILLION</h2>
I have a simple input which contains an icon on the right side and text on the left side
Here is what I would like to have in mobile version:
here is what I have so far in desktop version
HTML
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
csss
#media only screen and (max-width: 768px) and (min-width: 375px)
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
}
#input-icon {
background: url(../images/arrow-mobile.png) no-repeat scroll 7px 7px;
background-position: right;
/* opacity: 0.4; */
}
**
UPDATE
**
To simplify things here is my jsfiddle with the icon I am using :
http://jsfiddle.net/Mwanitete/z0x6uta2/2/
what do I need to do get what I want? I tried opacity but didn't work as expected?
.form_input {
font-size: 12px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: 1px solid #ccc;
border-radius: 5px;
}
#input-icon {
background: url(https://thumb.ibb.co/iAQtup/arrow_mobile.png) no-repeat scroll 7px 7px;
background-size: 7px;
background-position: right;
opacity: 0.4;
}
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
Result Preview:
You can also use this.
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: none;
border-bottom: 1px solid;
}
#input-icon {
background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 7px 7px;
background-position: 100%;
background-size: 4%;
}
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
Here is solution based on Dementic's answer ,
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: none;
border-bottom: 1px solid;
}
#input-icon {
background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 5px 5px;
background-position: right;
background-size: 12px;
height: 4px;
opacity: 0.4;
}
.form_input::-webkit-input-placeholder { /* WebKit browsers */
color: transparent;
}
jsfiddle for anyone interest to see the expected result
http://jsfiddle.net/Mwanitete/z0x6uta2/16/
Thanks all for help #StopActa2Though
you are able to change icon size inside the input field using background-size:20px;
example is given below according to your code
#input-icon {
background-size: 20px;
}
Please have a view at this image:
As from the image you can see that I have entered text in the input box but as I also have a button placed in that box so the text is getting hidden below the box.
Is there any way to prevent that, the button should also be on that place and the text should not hide instead it shoud be focused if further text is being typed.
Html code is:
<div class="form">
<input type="text" placeholder="Subscribe & Get Notified" id="email_inp">
<button style="outline: none;" class="btn-1 span btn-4 btn-4a icon-arrow-right" id="email_btn"><span></span></button>
</div>
The css code is:
#media only screen and (max-width: 768px)
{
input[type="text"]
{
font-family: "titillium_webregular", Arial, sans-serif;
border: none;
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
color: rgba(85, 85, 85, 0.85);
font-size: 1.1em;
display: inline;
padding: 19.7px 13px;
background: #f5f5f5;
outline: none;
width: 93%;
box-shadow: 0px 11px 34px #111;
vertical-align: middle;
}
.btn-1
{
cursor: pointer;
padding: 29px 29px;
display: inline-block;
position: relative;
vertical-align: middle;
margin-left: -67px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
}
Any helps appreciated. Thanks in advance.
Try this.. You can see a space right to the textbox. I have added padding right to the textbox
$(function(){
$('#tbcss').val('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
});
#tbcss
{
padding-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="tbcss"/>
In my opinion, you should use your styling in a bit different way and use .form CSS selector too. You can use flexbox for example:
.form {
// NEW:
display: flex;
justify-content: space-between;
// Your old input CSS:
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
background: #f5f5f5;
box-shadow: 0px 11px 34px #111;
width: 93%;
}
input[type="text"] {
// NEW:
width: 100%;
// Your old without unnecessary CSS:
font-family: "titillium_webregular", Arial, sans-serif;
color: rgba(85, 85, 85, 0.85);
border: none;
font-size: 1.1em;
padding: 19.7px 13px;
outline: none;
vertical-align: middle;
}
.btn-1 {
// NEW
align-self: flex-end;
// Your old without unnecessary CSS:
cursor: pointer;
padding: 29px 29px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
Add webkit CSS properties in case you need support in older browsers.
If you wish to prevent the image from hiding the text, then all you need to do is increase the padding-right property on the input textfield.
Maybe try a value of 40px or even more until you're satisfied with the result, then the caret should never go below the button.
Just add this:
input[type="text"]
{
padding-right:5%;
}
In this case all u need to do is add "padding-right: 50 px;" to the input text box class(50 is just a number u can increase or decrease that according to your need)
I am using below mentions css to show cutom radio buttons
input[type=radio]{
display:none;
}
.radio-options label::before {
content: "\2b24";
color:#e2e2e2;
display: inline-block !important;
width: 17px;
height: 17px;
vertical-align:middle;
margin-right: 8px;
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 8px;
font-size: 9px;
text-align: center;
text-shadow: 0px 0px 3px #fff;
font-family: monospace;
padding-top: 1.8px;
line-height: 10px;
cursor: pointer;
}
.radio-options label.active-radio::before {
content: "\2b24";
color: #f9b410;
background-color: #fff;
font-size: 9px;
text-align: center;
text-shadow: 0px 0px 3px #fff;
font-family: monospace;
margin-left: 0px;
padding-top: 1.8px;
line-height: 10px;
}
<div class="radio-options">
<div class="col-md-6 col-xs-6">
<input id="some_thing" type="radio" >
<label ng-class="{'active-radio':true}">Something</label >
</div>
</div>
In desktop browser it's working correctly and showing radio button as
But in safari iOs its not displaying anything
Any suggestions what could be possible cause ?
It is because of the Unicode symbol you use as a content. It doesn't seem to appear on iOS. If you change to "Black Circle" instead it will work. (Just increase the font-size to compensate the size.)
Unicode Black Circle symbol
Similar issue
I am trying to create a split button that looks like the default button, but every time I remove the border to create the split button, the arrow button loses its styling.
So, I want it to look like this:
But instead, I am getting this:
What am I missing? Here's the code:
.splitbtn-group {
position: relative;
float: left;
margin-top: 5px;
margin-left: 15px;
display: inline-block;
height: 24px;
}
.splitbtn {
position: relative;
float: left;
left: 20px;
height: 24px;
vertical-align: middle;
font-family: Tahoma;
font-size: 12px;
background: ButtonFace;
color: ButtonText;
border: 2px outset ButtonFace;
}
.splitbtn.splitbtn-drop {
border-left: 0;
}
<div class="splitbtn-group">
<button class="splitbtn splitbtn-main" data-bind=""> Assign Vaccines</button>
<button class="splitbtn splitbtn-drop" data-bind="">▼</button>
<ul class="splitbtn-drop-menu">
<li>Assign Vaccines</li>
<li>Unassign Vaccines</li>
</ul>
</div>
The default style of a button elements varies by browsers and operating systems, as the case with all the form elements.
The default styling in your case is given by the browser, from what I can see it seems to be Chrome, so if you apply any CSS to the buttons it will fallback to the default OS styling.
Though in your case the buttons style is changed to an even different one. I found out that it is because it only contains non-ASCII.
Adding a span with a white-space seems to be working with it (will also work without the span, just enter a space.)
<button class="splitbtn splitbtn-drop" data-bind="">▼ <span> </span></button>
Anyways the default styling is changed to the default OS style, in my case Windows 8.
Use custom CSS styles to make it look like the default:
.splitbtn {
background-color: ButtonFace;
-webkit-appearance: none;
border: 1px outset #999;
background-image: -webkit-linear-gradient(90deg, #ccc, #fff);
}
Do remember to use vendor prefixes for other browsers as well for the background-image property and also change background: ButtonFace; to background-color: ButtonFace;
You have to style the buttons completely in order to make it consistent. Else the inconsistency between the browser's and OS' default styling would persist.
Here's a demo with full code:
.splitbtn-group {
position: relative;
float: left;
margin-top: 5px;
margin-left: 15px;
display: inline-block;
height: 24px;
}
.splitbtn {
position: relative;
float: left;
left: 20px;
height: 24px;
vertical-align: middle;
font-family: Tahoma;
font-size: 12px;
background-color: ButtonFace;
color: ButtonText;
border: 2px outset ButtonFace;
-webkit-appearance: none;
border: 1px solid #999;
background-image: -webkit-linear-gradient(90deg, #ccc, #fff);
}
.splitbtn.splitbtn-drop {
border: 0;
-webkit-appearance: button;
}
<div class="splitbtn-group">
<button class="splitbtn splitbtn-main" data-bind=""> Assign Vaccines</button>
<button class="splitbtn splitbtn-drop" data-bind="">▼<span> </span></button>
Just give:
border-style: solid;