This seems to have the solution I need...
Border radius on Focus input field
Where I want the focus border to match the border radius used for the box itself. As it is right now, the box has curved corners but the focus does not so it looks odd.
I tried...
*:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
and...
.field-box:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
but neither work so I'm thinking something at a parent level is overriding it. When I check for the css in inspect, I don't see it show up so I can't confirm that is the case. I just know that I can make other changes to the form box but not the focus border itself. Anyone know how to address or if there is a way to identify what might be overriding it?
Related
I am using Angular and the Kendo control suite. In particular I'm wondering about tooltip styling.
I have successfully styled the tooltip how I want it with one minor exception that I can't figure out. There seems to be a shadow on the tooltip but it's around the entire extents including the little triangle callout piece so it doesn't fit the actual representation.
It's pretty faint, but you can see the light edge of the shadow below the triangle (the red arrow I added to highlight it).
Here is my style:
.tooltipStandard *{
background: var(--adskBlue);
color: white;
box-shadow: none;
text-shadow: none;
}
.tooltipStandard .k-callout{
background-color: transparent;
color: var(--adskBlue);
}
and I'm just using it like this:
<div class="contentSections" style="flex: 1" kendoTooltip tooltipClass="tooltipStandard">
Ideally I would like to have the shadow around just the blue portion of the tooltip but turning it off entirely would be fine too.
I tried to use the Chrome console to look at the styles but since it's a tooltip it won't stay open long enough for me to go to the inspection panel and select it. It also doesn't show up when I force hover state from the developer console. Is there any other way to inspect the element from the browser?
Any help would be appreciated.
EDIT
Thanks to the comment below I was able to get the tooltip to stay up and therefore find what I needed to override. Here is the much better output:
For anyone else having this issue, here are the styles I put into my code to make this update:
.k-animation-container-shown, .k-animation-container>.k-popup{
box-shadow: none;
}
.k-tooltip-wrapper .k-tooltip{
box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.5);
}
.tooltipStandard .k-callout{
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}
The bottom style places the shadow onto the triangle and unfortunately it goes over the rectangle just a hair but you'd have to look pretty hard to see that so I'm not super concerned about that. You could also just remove the triangle shadow. If anyone has a good solution to 'clip' the triangle shadow on the top only that would be awesome.
Posting this answer based on the comment by #yazantahhan above.
I just needed to find the right styles to apply. Thanks to the comment I was able to set the tooltip to show on click using the showOn property. To do so I changed this:
<div class="contentSections" style="flex: 1" kendoTooltip tooltipClass="tooltipStandard">
to this:
<div class="contentSections" style="flex: 1" kendoTooltip tooltipClass="tooltipStandard" showOn="click">
That allowed me to click the element and the tooltip stayed up and I could inspect it in the developer console.
Once I found that out I found the right styles pretty quickly. Here are the css overrides I put into my style sheet to make it work:
.k-animation-container-shown, .k-animation-container>.k-popup{
box-shadow: none;
}
.k-tooltip-wrapper .k-tooltip{
box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.5);
}
.tooltipStandard .k-callout{
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}
And this is the result:
I need to change a button on my website's homepage from a curved edge to sharp.
It is a WordPress website and I am trying to add this code via Additional CSS window.
I tried to perform the below code, but it did not work.
wobble-horizontal.shop-button.arrow-right.style2.black.bg-white
{
border:3px solid #bada55;
}
Any suggestion on how to make the button sharp-edged?
Edit: I have just realised I haven't mentioned "a" class at the beginning. It should be a.wobble. Sorry for the confusion.
Assuming that's just a div, it's as simple as setting the border-radius to 0px
Also, the library you're using could be high up in specificity, so you can also try border-radius: 0px !important; to try and force it.
Based on your border: 3px solid #bada55 line, I think you may have the wrong selector as that should be setting the border of that button a lime green and not gray.
#sharp {
border-radius: 0px;
}
#not-sharp {
border-radius: 10px;
}
div { background: red; margin: 10px; }
<div id="sharp">My Sharp Button</div>
<div id="not-sharp">My Not Sharp Button</div>
There seems to be another CSS script that is manipulating the border-radius property.
To have sharp borders, use:
border-radius: 0;
The code you were using just sets the border's thickness (3px), style (solid fill), and color(#bada55), not the radius.
If this does not do it, try tracing down what other CSS script is manipulating the border radius, or just use the !important directive to override:
border-radius: 0 !important;
border-radius: 0;
or border-radius: 0 !important; if your CSS is being overridden.
Setting border-radius to 0px should give you straight edges on the button
I am attempting to skin a Kendo UI DropDownList widget for my own site, and have had fairly good success with a small caveat that is driving me nuts.
I am including a link to a jsBin that demonstrates the issue, and some screenshots. But basically what is happening is that I want the entire dropdown list to be flat (no border radius), and then to be very solid (white background, black text) and the currently selected item to have a thick red bar as its left border (3px in my example), and then as you hover over the items in the list box, their left border becomes a thick greenish/blue bar.
This is working, except for some strange spacing issues; First of all, as I hover over things, they "jump" around. They get pushed this way and that a bit obnoxiously, making it feel non-uniform. I really want to fix that; and the thing that is driving me the most nuts is that the "bar" that I use on the left-border is having a strange curvature to it, making it look very out of place, as if it is almost beveled. Can anyone assist with this?
jsBin Example
.custom-dropdown .k-item {
background: white;
font-weight: lighter;
padding: 0 4px;
border-left: solid 2px white; // add this
}
.custom-dropdown .k-item.k-state-selected,
.custom-dropdown .k-item.k-state-focused {
color: black; // and add this
border: solid 1px white;
border-left: solid 3px #b91d47;
}
I think there nothing to do for strange curvature.
http://www.w3schools.com/css/css_border.asp
http://jsbin.com/elOSuDo/1/edit updated jsbin
looking on this page: http://acecontainerbuilder.com.dnnspeed.com/news-events.html you will see if using iOS device (iPad, iPhone) that the background color of the input in the bottom left corner bleeds through the border radius. Does anyone know of a way to prevent this without using images?
Try adding -webkit-background-clip: padding-box; to the style of the input box.
Edit: if that doesn't work, try -webkit-background-clip: content-box;, or either of those properties without the -box in the value.
I just encountered this same problem, and the best solution I could come up with was to wrap the input element in a div tag and apply the styles to the div instead of the input element.
#sidebar div.search-wrapper {
background-color:#fff;
border-radius: 14px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) inset;
}
#sidebar input[type="text"] {
background-color: transparent!important;
box-shadow:none!important;
}
For whatever reason, mobile safari isn't honoring the border radius on input elements even though desktop safari is. Strange.
After searching for a while I saw that they way to set a visible border on a groupbox is to use the StyleSheet property. I added:
border: 2px solid gray;
but there are a couple of problems.
1) Everything inside the groupbox also inherits this setting!
2) The border has a little hole/piece missing near the title.
Here is a picture of what I'm talking about:
Anyone know how to do this properly?
Thanks,
David
The first problem is simple enough When you add a stylesheet to a control it automatically propagates the style to all child widgets. However, you can restrict the use of the style sheet in a couple of ways. You can specify the type of control you want the style sheet to apply to. Example:
QGroupBox {
border: 2px solid gray;
border-radius: 3px;
}
This style sheet will only be set on Group boxes. However, if you put a second group box inside this one, the style will propagate to this one as well. Which may be good or bad.
Another way is to specifically the objectName of the widget you are applying the style to. Example:
QGroupBox#MyGroupBox {
border: 2px solid gray;
border-radius: 3px;
}
This will only apply the style to a group box with an object name of MyGroupBox.
As for the space, it is happening because the title is being drawn on top of your border. You can also add a section to your style sheet to change your groupbox title. This includes setting it's background to transparent, and to move the title around to your hearts content.
Example: This will set your title to the top left corner of the group box just inside your border, with no gap.
QGroupBox::title {
background-color: transparent;
subcontrol-position: top left; /* position at the top left*/
padding:2 13px;
}
this worked for me on Qt 5.1.
qApp->setStyleSheet("QGroupBox { border: 1px solid gray;}");
Elimeléc
Specify a selector for the group box style such as:
QGroupBox
{
border: 2px solid gray;
}
As for the gap, you can probably fix that by setting some padding. Check the docs here.