When we click on TextField of Fluent UI, the border is highlighted. I would like to remove this effect.
I tried the following, but none of them works:
textarea:focus,
input:focus {
outline: none;
}
*:focus {
outline: none;
}
input:focus {
outline: none;
}
input {
border: none;
}
:focus-visible {
outline: none;
}
Here is the codesandbox: https://codesandbox.io/s/determined-brook-0cd0rc?file=/src/App.js
Could anyone help?
The highlight style is getting applied from the parent div of the input, so, we have to apply style to it, not the input. Try these styles:
.ms-TextField-fieldGroup {
border-color: #000;
}
.ms-TextField-fieldGroup::after {
display: none;
}
Related
Within a specific div, I want to make focused buttons to look exactly like non-focused buttons.
Is there a way I can express that in sass/scss?
Something similar to this:
.myDiv {
> button {
&:focus {
#extend &:not(&:focus)
}
}
}
Alternatively, can I disable all rules that are applied only because of the definition for pseudo-class :focus ?
You can simply overwrite the default styling by doing this below
.myDiv {
> button {
&:focus {
outline: none;
}
}
}
If you needed to use extend, you could do something like this
%no-focus {
outline: none;
}
.myDiv {
> button {
&:focus {
#extend %no-focus;
}
}
}
However, I advise you read this article from the a11y project - which explains why in terms of it's not good to un-style :focus'd elements in terms of accessibility.
You could use placeholder selectors. Something along the lines of this:
%button {
color: red;
}
button {
#extend %button;
&:focus {
color: green;
}
}
.myDiv {
> button:focus {
// Extend from %button again, thus overriding through specificity.
#extend %button;
}
}
Here, I explain simply. Please see the code below.
HTML:
<div class="mydiv">
<button>My Button</button>
</div>
SCSS:
* {
outline: none;
}
.mydiv {
button {
border: 1px solid #000;
&:focus {
border:1px solid #ccc;
}
}
}
I need to hide the dropdown arrows on my select boxes when they are disable. From every thing I have read, this should work?
select.btn-underline-primary {
box-shadow: none !important;
padding-left: 0;
color: $dark !important;
option {
border: none;
}
&:disabled {
border-bottom-color: transparent;
&::-ms-expand {
display: none;
}
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
The problem is that applying display: none to the ::ms-expand only hides the dropdown for Internet Explorer 10 and 11. If you additionally want to hide it for Firefox / Chrome , you'll need to apply -moz-appearance: none and -webkit-appearance: none to the select respectively.
Note that :disabled is an attribute of the select element itself, and does not create a separate pseudo-class in the DOM. As such, you'll need a separate selector:
select.btn-underline-primary:disabled
Which combined with the rest of the code looks like:
select.btn-underline-primary {
box-shadow: none !important;
padding-left: 0;
color: $dark !important;
option {
border: none;
}
&::-ms-expand {
display: none; /* Hide dropdown in IE 10 & 11 */
}
}
select.btn-underline-primary:disabled {
border-bottom-color: transparent;
-moz-appearance: none; /* Hide dropdown in Firefox */
-webkit-appearance: none; /* Hide dropdown in Chrome */
}
This can be seen working on JSFiddle.
i've tried all of the top resolutions here, but so far have only been able to change the highlight color behind the button text and not the entire button. i'm trying to change the hover state color to a yellow hex on a youcanbook.me calendar, but only have access to css updater, not the source code... any thoughts? edit: developer's code for new themes is here --> youcanbook.me/design_guidelines
.gridPage .gridDays .gridDay div.gridNoFree:not(.gridTechnicallyFree):not(.gridHighlight) {
display: none;
}
div.showTechnicallyFree div.gridTechnicallyFree {
background-color: transparent;
text-decoration: line-through;
font-size: 12pt;
color: #444;
}
div.gridHighlight {
color: #fff;
text-decoration: none;
}
div.gridBusy {
display: none !important;
}
div.gridTechnicallyFree {
display: none !important;
}
.gridPage .gridDays .gridDay div.gridNoFree {
display: none;
}
.gridPage .gridDays div.dayNoFree {
display: none;
}
div.gridHighlight {
background-color: #ffdf00
}
div.gridSlot:not(.gridBusy):hover {
background-color: #ffd700;
}
It is my existing less code:
.my-form {
.form-control {
&:focus {
border-color: blue;
}
}
It will set the border color of .form-control to blue whenever it gets the focus.
Now in addition to the focus event, I want to set the border color to blue when the '.my-form' element has an additional class 'active'.
I can repeat myself, but it is not ideal:
.my-form {
.form-control {
&:focus {
border-color: blue;
}
}
.my-form.active {
.form-control {
border-color: blue;
}
}
But this does not work obviously:
.my-form {
.form-control {
&:focus,
& .active {
border-color: blue;
}
}
I think I can define a function to set the border color. But is there any way I can express this more concisely? Hopefully it can be next to the &:focus selector.
I think what you want to do is this:
.my-form {
.form-control {
&:focus, .active& {
border-color: blue;
}
}
}
Codepen
.active & would output
.active .my-form .form-control
.active& would output
.my-form.active .form-control
Basically I'm looking for a way to apply a specific style to an linked image like:
<img alt="" src="/media/XXXX.gif">
because my css can't do it despite a > img and i found that css3 can target specific a link depending on file type.So i try :
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
.HPDroite a[href$=".gif"]:hover {
text-decoration: none;
border: 0;
}
but nothing change, it's worth than before !
So what's the way to apply specific style to an a img ?
EDIT: after explaination by captain, my code look like:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
My goal is to set off the background property on a a img:hover.
Not sure I understand the question but if you are looking to set some css rules specifically to the image inside the link, you can put the into a class and call like such:
<a class="mylink" href="http://XXXX"><img alt="" src="/media/XXXX.gif"></a>
Then, to add css rules to it, you may call
.mylink img
{
/*Your css rules here*/
}
Hope it helps.
You need to alter your CSS, this code doesn't make sense:
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
this is saying "target a class of HPDroite with a child element of an a tag that has an href ending in .gif".
Thus not targeting the a tag at all, nor the image inside.
I altered your code and made a codepen for you to see my changes.
See here: Codepen with fixes
Notice that I altered your CSS showing you how to target the a tag and how to target the image inside, as well as some added fanciness ;)!
Hope this helps and good luck with the project.
Updates due to change in question:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
First of all, you are setting text-decoration on the image, this should only be on the a tag, since an image has no text, changes like so:
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
This updates the image by default to have no border or background and still allows the a tag to have no text decoration.
As an example, I set the background of the image :hover to make the background pink.
"So what's the way to apply specific style to an a img ?"
Well, above I have demonstrated how to change the style of all images in the .PartieDroite1 > a > img - here:
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
and how to alter the image when hovered, here:
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
thus answering your question as I would interpret it.
So what's the way to apply specific style to an a img
To style a specific image format you would use:
This selector method
img[src$=".png"] {
border-color:yellow;
}
img {
border: 12px solid green
}
img[src$=".png"] {
border-color: yellow;
}
img[src$=".jpg"] {
border-color: red;
}
<img src="http://hello-kitty.sanriotown.com/images/kitty.png" alt="" />
<img src="http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg" alt="" />
If the image in inside a link then the style would be :
.HPDroite a img[src$=".png"] {
border-color:yellow;
}
NOTE:
However, if you are trying to style the link based on the image format then that is not possible as there is no parent selector