I have this button which doesn't highlight properly when I click on it, please see the image, and CSS file down below
CSS for the toggle button:
.mat-button-toggle {
box-sizing: border-box;
height: 33px;
width: 159px;
border: 1px solid #E1E1E1;
border-radius: 2px;
background-color: #FFFFFF;
}
.mat-button-toggle:hover {
border: 1px #000 solid !important;
background-color: #FFF !important;
border-radius: 5px !important;
}
CSS for the text
.ticket {
margin-top: 5px;;
height: 18px;
width: 122px;
color: #111111;
font-family: Arial;
font-size: 16px;
letter-spacing: 0;
line-height: 18px;
}
HTML
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" >
<mat-button-toggle routerLink="ticketView" value="ticketView">
<div class="ticket" id="p1">
{{'TicketOverView' | translate}}
</div>
</mat-button-toggle>
My guess is there is something else in your css html going on. I have recreated your css in codepen for you and couldn't reproduce your results.
I would double check your html markup.
Here is the codepen I produced
https://codepen.io/jmllr89/pen/KKdzLGw
Also you do not need !important on the :hover pseudo-class. CSS is smart enough to recognize what needs to be changed. So simply define your initial state in mat-button-toggle and then in mat-button-toggle:hover you create a second state, and css will make the necessary changes.
.mat-button-toggle {
height: 33px;
width: 159px;
border: 1px solid #E1E1E1;
border-radius: 2px;
background-color: #FFFFFF;
}
.mat-button-toggle:hover {
border-color: #000;
border-radius: 5px;
}
Related
I am trying to create a button with 3 horizontal dots as in the attached screenshot with the below css class and unicode Character “…” (U+2026).
But when I apply background it takes more width and height, can any one please suggest.
In the attached screenshot, I need the first image but getting the second image.
.test:after {
content: '\2026';
font-size: 25px;
background-color: #D0D0D0;
}
<div class="test"></div>
How about this?
Placing a <div> inside the button allows us to fine tune the position of the dots.
button {
border: 2px solid #9fa2a4;
height: 18px;
border-radius: 5px;
background: linear-gradient(#fbfbfb, #d1d1d1); /* gives the "gradient */ color background"
}
.dots {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* The Arial font appears to have "square" dots */
font-size: 36px; /* The size of the dots */
line-height: 0; /* helps vertically position the dots */
margin-top: -10px; /* helps "raise" the dots higher */
letter-spacing: -2px; /* "squeezes" the dots closer together */
}
<button>
<div class="dots">...<div>
</button>
mostly achieved the required style with the code. Now trying to add empty background before and after 3 dots in the result image.
.horizontal-dots {
cursor: pointer;
width: 19px;
height: 14px;
background-image: radial-gradient(circle, black 1.5px, transparent 2.0px);
background-size: 6px 16px;
background-color: #EEEEEE;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-radius: 0.2em;
margin-left: 14px;
}
.horizontal-dots:hover {
border: solid .2px #0198E1;
}
<div class="horizontal-dots">
</div>
I'm trying to attach a click element only on the :after pseudo-element on the following fiddle:
<div class="tag deletable", style="style")>
Tagname
</div>
.tag {
display: inline-block;
background: white;
padding: 3px 6px;
line-height: 1em;
border-radius: 4px;
font-size: 12px;
border-right: 5px solid;
}
.deletable {
border-right: 18px solid;
position: relative;
}
.deletable:after {
content: "\D7";
position: absolute;
color: white;
right: -12px;
top: 3px;
font-size: 12px;
cursor: pointer;
}
https://jsfiddle.net/x2ztqdbm/
But it seems that is not possible. Is there a way to achieve that?
If not, can someone help me rewriting the HTML code in order to not use a pseudo-element? It's important that the :after section never breaks to the next line.
Thanks in advance.
Try This
HTML
<div class="tag deletable", style="style")>
Tagname
<span class="wrong">x</span>
</div>
CSS
.tag {
display: inline-block;
background: white;
padding: 3px 6px;
line-height: 1em;
border-radius: 4px;
font-size: 12px;
border-right: 5px solid;
}
.deletable {
border-right: 18px solid;
position: relative;
}
.wrong {
position: absolute;
color: white;
right: -12px;
top: 3px;
font-size: 12px;
cursor: pointer;
}
Preety much the same. use a font-awesome icon in place of 'x'
Link for reference
Pseudo elements (as far as I know) are not part of the DOM, so you can't attach events to them. However, why not using an inline element like a tag or something like that? It would be even easier...
You can attach a click event to a pseudo element using the pointer-events css-rule, like this: https://jsfiddle.net/cq9yzjeb/
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)
Hi I'm doing a really simple navigator but I just came up into a strange problem I can't figure out where this is coming from.
My separations are not exactly till, they are created the same way..
Some are tougher than other and I don't get why.
Could it be due to the font ? I tried it with different browser and the problem is persistent...
JsFiddle There
The code is really simple :
HTML
<nav id="main-menu2">
<span class="fa fa-home"></span>
DERNIÈRES MINUTES
SÉJOURS
CROISIÈRES
CIRCUITS
FRANCE
WEEK-ENDS
VOYAGE À LA CARTE
PROMOS
</nav>
SCSS
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0.7em;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -2px;
margin-right: -2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.3em;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}
I can't reproduce the bug, but I may have a solution : you're currently using borders that you don't need. Let me explain : there is a border right on Séjours and a border left on Croisières. So 2 borders, and you're currently hiding one of them.
Using font-size in em, makes your trick (margin-left / margin-right : -2px) unconsistent, because em can't really be converted into px (well it can, but it will depends on the browser calculation so you may need more than 2px to make a border go over another, maybe 1px maybe 1.5487px).
So, my solution : removes all the unecessary borders :
a {
border-left: 1px solid #fff;
}
a:last-child {
border-right: 1px solid #fff;
}
No more borders overlapping, more reliable solution.
Manage it with the font-size:
#main-menu2 {
font-size: 0;
}
#main-menu2 a {
font-size: 14.5px;
margin-left: -1px;
margin-right: 0;
}
The whole code:
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -1px;
padding-left: 10px;
padding-right: 10px;
font-size: 14.5px;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}
Demo: JSFiddle
It is because in your code you have some space by indent the text. Unfortunately all browsers interprete these content as white spaces and thus you have some gap between the elements.
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;