So I have tried manipulating the style within the chrome inspector and copying it directly into my stylesheet, but it is not reflected when I run it again on chrome. The code runs fine on firefox otherwise and also if I manually input the change in chrome inspector.
Not sure what the issue is as I've tried adding the !important as well and making sure of the hierarchy is of the right order.
css code
.select2-container--default .select2-selection--single {
border: 1px solid #ced4da;
}
.is-invalid .select2-container--default .select2-selection--single {
box-shadow: none;
border: 1px solid #dc3545 !important;
}
html
<div class="form-group d-flex flex-wrap justify-content-between {{ $errors->first('contact_name', 'is-invalid') }}">
<label for="contact_name">Name</label>
<span class="message">{{ $errors->first('contact_name', ':message') }}</span>
<input type="text" class="form-control" id="contact_name" name="contact_name" placeholder="e.g. John Smith">
</div>
I have also cleared the cache and checked to see the source file that everything is as per updated. It is just not showing on the result ONLY in chrome
Sometimes it needs hard reload.
Hold down Ctrl and click the Reloadbutton. Or, Hold down Ctrl and press F5.
Ctrl+F5
You can also clear the cache using the chrome debugging tools. Press F12 then select Application then select Clear Storage make sure the cache checkboxes are checked, then click the clear site data button.
Try Hard Reload by right click on reload button.
Related
Bulma has support for styling a file upload button. The following example has been taken from the official documentation for version 0.9.3:
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
How can I style a disabled upload button? I tried putting a disabled attribute on the input element which avoids the file open dialog from being shown. The upload button still is styled like an active control, though.
Based upon the suggestion from user Connexo, the following CSS allows to render a file upload button in disabled state when the (hidden) input control has the attribute disabled:
.file-input[disabled] + .file-cta {
cursor: not-allowed;
opacity: 0.5;
}
.file-cta .file-label {
cursor: inherit;
}
When using color modifiers like is-primary on the file upload button the CSS might need to be extended with color settings.
There is a feature request ticket on the Bulma project GitHub page together with a proposed fix, but it has not been integrated into the main development branch yet.
The problem
In IE11 the image in the following code is clickable to activate/toggle the input in the label:
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
While the image in the this exactly same code but inside of a <form> is not clickable to activate/toggle the input:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
(Demo at jsfiddle)
Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).
This was tested and reproduced on:
IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
IE 11.0.9600.16438 on Windows RT 8.1 tablet.
IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
IE 11.0.10240.16431 on Windows 10
This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.
Questions:
Can this be solved without JS while still using image tags?
If not, what other possible solutions are there?
(Optional) Why doesn't the image in the second example trigger the input element (while doing it in the first)?
One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)
label{
display: inline-block;
}
label img{
pointer-events: none;
}
(Demo at jsFiddle)
Is a bit older question, but as its pretty high in google search, I'll post here one more answer that fixes this in all IE versions.
.
The checkbox/radio has to be outside of label, it has to have own unique ID and label has to have attribute for which contains the ID of checkbox/radio its related to:
<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">
If you done that and if you use PHP (which you probably are), you can use this piece of code:
if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
?>
<script>
$(document).ready(function() {
$("label img").on("click", function() {
$("#" + $(this).parents("label").attr("for")).click();
});
});
</script>
<?
}
I know its JS, but there is actually no other fix for =< IE10 without JS usage.
It detects all IE, versions (IE10 and 11 included, have no idea about Spartan tho, i think it does not detect that one).
Ps.: Answer above me does not actually work for IE8, IE9 and IE10. Just so you know.
This is the css of a info button(from bootstrap) and its in my style.css file in resources in resources in netbeans. I am using a maven/web application with Java Server Faces framwork.:
.btn-info {
background-color: #d60d8c;
border-color: #d60d8c;
}
this is the button code in a JSF page:
<button type="button" class="btn btn-info navbar-btn navbar-right" id="logg">Sign in</button>
The button code is in a bootstrap navbar. The border of the button is using the border-color: #d60d8c;, but the background color of the button does not change according to background-color: #d60d8c;.
Why is that? Am I doing something wrong here?
(Assuming css is loaded properly)
Your css selector is only class-specific. Probably, somewhere in your project there are more specific css selectors, matching the button. (you can see, what selector "wins" for property using Chrome developer tools (F12), tab Elements-Computed.
So, you need to be more specific.
For example, add id selector:
#logg.btn-info {
background-color: #d60d8c;
border-color: #d60d8c;
}
If it won't fix your issue, try to play with specificity
This is my css for a paypal sprite I have made..
Image below shows what we get in Internet Explorer and what we get in Firefox ..
The code to display the sprite is:
.ppsprite {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px 0px transparent;
width:200px;
height:100px;
position:absolute;
left:54px;
}
.ppsprite:hover {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px -100px transparent;
}
The code to display the sprite ( html )
<input class="ppsprite" type="image" name="submit" alt="">
The screenpic ( internet explorer and firefox )
The sprite works perfectly in all browsers, but you can see a shitty border in IE and a kind of missing image icon top left.
In chrome and safari, pretty much same ( but shows alt text on top of sprite )
Add a src attribute to your input tag:
<input class="ppsprite" type="image" name="submit" alt="" src="images/blank.gif">
Just create a file called blank.gif
You don't need to do anything with it, just make sure it's in the right directory.
don't use an image-input for your sprite - obviously this should show a broken-link-icon as it must contain an image (set via the src-attrtibute) but you dont set one. maybe you can replace the input with an a (a link) or a button (type="button" or type="submit"). the later should work without changing anything else as a type="submit" would still submit the form, just like type="image" does (and i don't think you'll need to know the klicked x/y-coordinates in this case).
the border simply appears because an input-image has a border by default in some browsers - simply set border:0; for .ppsprite (but, as said, you shouldn't use an input-image at all in this case).
Is there something wrong with firefox? My styles on <label> work in every browser but FF. I'm using 3.5.5. I mean they even work in every version of IE? anyone have a suggestion?
EDIT, as i said, the code works in any other browser. but all of these fails.
<label style="color: #aaa; font-weight: bold;">Blah</label>
and
.mylabel {
color: #aaa;
font-weight: bold;
}
<label class="mylabel">Blah</label>
and
label {
color: #aaa;
font-weight: bold;
}
<label>Blah</label>
There you go. Where's the error in code? i sure don't see one.
The most probable reason is there are some other styles that are overriding these. The easiest thing you can do here is:
Download firebug: http://getfirebug.com/ and install it.
Open up firebug, click the second button on the top left (the one that looks like an arrow pointing to a button) and then click on your label. On the right side you will see what styles are being applied to it and which are being overwritten.
As a general rule, it's a good idea to post all relevant information / code about your question. The users of SO are not wizards; if you couldn't figure out the problem with the code in front of you, there's a slim chance anyone will figure out the problem with no code. Try to put yourself in their shoes – would you be able to figure out a technical issue that just says "something is wrong with my code"? Most likely, you're going to get downvoted without getting a proper response.
Renders fine in FireFox 3.5.5, both with an XHTML transitional DOCTYPE and no DOCTYPE.
What environment are you testing this in... Is it local or a remote server? If you go to the View menu and view the source for the page via FireFox, do the inline styles appear correctly? Could you be looking at a cached copy of the page?
Another worthwhile alternative is to start from scratch. Create a minimal page with just a label and the CSS to color it. Add features of the broken page until you reach the point where the problem occurs.
Also ensure that you don't render in quirks mode but in standards mode. Usually the styles which doesn't work in FF but do in IE is after all IE's fault because it's either too forgiving or rendering in quirksmode.
Read this for more info: http://hsivonen.iki.fi/doctype/
To the point: use a strict doctype and develop in FF.
As others have pointed out, works fine for me. Maybe you can try the following code to narrow down the problem:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.mylabel {
color: #aaa;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<label class="mylabel" for="f1">Field 1</label>
<input id="f1" type="text">
<label style="color: #aaa;font-weight:bold" for="f2">Field
2</label>
<input id="f2" type="text">
<input type="submit">
</form>
</body>
</html>
I had a similar problem and it seems that a simple
float: left;
clear: left;
solves it.