I have a container with two elements inside. A Link tag and an inline svg.
My plan is to set the width of the container to the maximum width of its children, which I assume should be the content of the link tag with its padding.
Since the svg has no width defined and only uses a viewBox, I would assume the browser to scale the svg to the width of its parent container.
All browser except firefox are behaving like that. I don't understand why Firefox is stretching the container to 100% of the usable space, even larger than the viewbox of the svg.
div {
width: fit-content;
background: #344566;
}
a {
padding: 0 4rem;
color: white;
font-size: 2rem;
}
svg {
fill: white;
}
<div>
This is a link
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>
</div>
I moved the SVG to be a background image of the link. This will make the link text control the size of the box. To make space for the background I added a block (a:after) after the link that has a padding of 100%. This is sometimes used for making a square, but is also useful in this situation.
div {
width: fit-content;
background: #344566;
}
a {
display: inline-block;
padding: 0 4rem;
color: white;
font-size: 2rem;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;fill:white" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>');
background-repeat: no-repeat;
background-position: center 1rem;
background-size: contain;
}
a:after {
content: "";
display: block;
padding-top: 100%;
}
<div>
This is a link
</div>
Update
OP asks if the color of the background can be changed on hover. It cannot: Specify an SVG as a background image and ALSO style the SVG in CSS? - Stack Overflow. But in this case the SVG can be used as a mask on the element -- or like in this case -- on the after pseudo element. The SVG is masking the background-color -- and this can be changed on hover. Here I's using the currentColor value.
div {
width: fit-content;
background: #344566;
}
a {
display: inline-block;
padding: 0 4rem;
color: white;
font-size: 2rem;
}
a:after {
content: "";
display: block;
padding-top: 100%;
background-color: currentColor;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;fill:white" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>');
}
a:hover {
color: orange;
}
<div>
This is a link
</div>
I am new to WordPress and am working on my first website. I am using a plugin for a livechat, which has a colour that is not to my liking. Seeing that the background colour for the button was set using inline CSS, I tried overriding the background colour using a child theme. However, for some reason it's not overriding the colour. I tried the below codes but none seemed to work.
#divClosedChatBar {
background-color: #222;
}
#divClosedChatBar {
background-color: #222 !important;
}
#divClosedChatBar[style] {
background-color: #222 !important;
}
<div id="divClosedChatBar" style="position:relative;width:205px;height:38px;top:0px;right:0px;bottom:0px;left:0px;overflow:hidden;border:0px;margin:0px;padding:0px;background-color:#1B68FF;text-align:center;cursor:pointer;vertical-align:middle;border-top-right-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-top-right-radius:5px;border-top-left-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-top-left-radius:5px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;">
<div id="divUnreadMessages" style="float:left;position:absolute;height:16px;line-height:16px;margin-left:5px;margin-top:11.5px;padding: 0px;background-color:#FE6700;border-radius: 4px;">
<span id="txtUnreadMessages" style="display:none;padding:0px 3px 1px 3px; color:white;font-weight:bold;background: -webkit-gradient(linear, left top, left bottom, from(#FE9504), to(#FE6700));background: -moz-linear-gradient(top, #FE9504, #FE6700);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;">0</span>
</div>
<span id="txtHelpChat" style="display:inline-block;cursor:pointer;margin-top:10.5px;margin-right:auto;margin-left:auto;font-size:15px;color:#FFFFFF;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;">Leave us a message</span>
</div>
i want to use a SVG as CSS mask, but since i want users to be able to upload the SVG themselves, the SVG is not embedded in the code, but it's own file instead.
I saw multiple explanations on how to use SVG as a mask but it always referred to the ID of an Inline SVG Code, that was embedded in the page, but never referred to using an external SVG
Right now i am using a PNG as mask, but i'd prefer a vector solution instead of a pixel solution.
Here's my results so far:
https://codepen.io/hergi/pen/bGwXOOw
.logo {
background-color: orange;
display: inline-block;
height: 10vh;
}
img {
opacity: 0;
vertical-align: middle;
margin: 0;
padding: 0;
height: 100%;
}
}
<div>PNG Mask:</div>
<div class="logo" style="mask: url(https://i.imgur.com/2nxTeqy.png) no-repeat center / contain;
-webkit-mask: url(https://i.imgur.com/2nxTeqy.png) no-repeat center / contain;">
<img src="https://i.imgur.com/2nxTeqy.png" />
</div>
<div>SVG Mask (css mask):</div>
<div class="logo" style="mask: url(https://svgshare.com/i/Ta9.svg) no-repeat center / contain;
-webkit-mask: url(https://svgshare.com/i/Ta9.svg) no-repeat center / contain;">
<img src="https://i.imgur.com/2nxTeqy.png" />
</div>
<div>SVG Mask (css mask-image):</div>
<div class="logo" style="mask-image: url(https://svgshare.com/i/Ta9.svg) no-repeat center / contain;
-webkit-mask-image: url(https://svgshare.com/i/Ta9.svg) no-repeat center / contain;">
<img src="https://i.imgur.com/2nxTeqy.png" />
</div>
I have created a new asp.net mvc-5 web application using VS 2013. now when i try the built-in login form and i leave the required fields empty i got the following, :-
where both fields were not highlighted with red color as i use to get inside previous versions of asp.net mvc. now from the generated markup i can inspect that any field that have validation errors will have the following class:-
input-validation-error
But i search the whole css files which are generated automatically inside my asp.net mvc-5 web application mainly; site.css , bootstrap.css bootstrap.min.css , but i could not find a definition for the input-validation-error ?? so can anyone advice on this please, how i can highlight the fields with red color if they have validation error , and why this is not the default behavior inside asp.net mvc-5 ?
why this is not the default behavior inside asp.net mvc-5
It's not default behavior of ASP.NET MVC 5. You just need to add following css classes in Site.css file.
.field-validation-error {
color: #e80c4d;
font-weight: bold;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #e80c4d;
}
.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}
.validation-summary-valid {
display: none;
}
For those using Bootstrap, you need to copy the CSS from Bootstrap's validation CSS to the equivalent .NET/jquery classes.
As of Bootstrap 4.5, it looks like this:
Copied from .was-validated .form-control:invalid, .form-control.is-invalid
.form-control.input-validation-error {
border-color: #dc3545;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
Copied from .was-validated .form-control:valid, .form-control.is-valid
.form-control.valid {
border-color: #28a745;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
I just started using project for showing multiple tags from a select box and it works great, thanks for the library.
I just need to modify the color or css of the tags shown in multi-value select-boxes. Right now the color of the tag is shown as grey and I would like to change that to some other color according to the type of the tag. Or at least is there a way to change the default color?
Also is it possible to change the css class of tags? There is an option such as formatResultCssClass but when I tried to add css classes through that property nothing changed, I would appreciate if someone can show an example how to do this?
Edit: Workaround for solving the problem:
Add a new property to the select2.defaults for representing classes of selected objects.
$.fn.select2.defaults = {
...
selectedTagClass: "",
...
}
addSelectedChoice: function (data) {
var choice=$(
"<li class='select2-search-choice " + this.opts.selectedTagClass + "'>" +
" <div><a href='#' onclick='return false;' class='select2-search-choice-close' tabindex='-1'><i class='icon-remove icon-white'/></a></div>" +
"</li>"),
id = this.id(data),
val = this.getVal(),
formatted;
...
And initialize select2 using this new property:
$(".#select2Input").select2({placeholder: "Please Select Country",
selectedTagClass: 'label label-info', // label label-info are css classes that will be used for selected elements
formatNoMatches: function () { return "There isn't any country similar to entered query"; }
});
For formatting the tags you can use the function formatSelectionCssClass.
$("#mySelect").select2({
formatSelectionCssClass: function (data, container) { return "myCssClass"; },
});
Or you could add a css class based on the option id:
$("#mySelect").select2({
formatSelectionCssClass: function (data, container) { return data.id; },
});
Remember that you will need to override both filter and background_color in your css class
First up - a warning that this means you are overriding the CSS that is internal to select2, so if select2 code changes at a later date, you will also have to change your code. There is no formatChoiceCSS method at the moment (though it would be useful).
To change the default color, you will have to override the various CSS properties of the tag which has this CSS class:
.select2-search-choice {
background-color: #56a600;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
-moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
color: #333;
border: 1px solid #aaaaaa;
}
To change the class of each tag based on the text or option # of that tag, you will have to add a change event:
$("#select2_element").on("change", function(e) {
if (e.added) {
// You can add other filters here like
// if e.val == option_x_of_interest or
// if e.added.text == some_text_of_interest
// Then add a custom CSS class my-custom-css to the <li> added
$('.select2-search-choice:not(.my-custom-css)', this).addClass('my-custom-css');
}
});
And you can define a custom background-color etc in this class:
li.my-custom-css {
background-color: // etc etc
}
In my case I needed to show the difference between tags that were "selected" and those which were being added.
The help here was for the previous versions of select2, and not of much use. Using the current 4.0 version (with its terribly sparse documentation) I was able to achieve this using the template functions and a little bit of 'cleverness'.
First step is to template the results (it should be noted that on every select or remove action this is fired for every selection in the box). This normally returns JUST the text that will go in the resulting LI... however we want to wrap that text in a span (and tell S2 not to strip the HTML out by returning an object) with a custom CSS class for our type. In my example I use the selected property to determine this:
$('.select2_sortable').select2({
tags: true,
templateSelection: function(selection) {
if(selection.selected) {
return $.parseHTML('<span class="im_selected">' + selection.text + '</span>');
}
else {
return $.parseHTML('<span class="im_writein">' + selection.text + '</span>');
}
}
});
Your resulting HTML after an item is selected should be something like this:
<ul class="select2-selection__rendered ui-sortable" id="select2_rendered_smartselectbox_4">
<li class="select2-selection__choice" title="John Doe">
<span class="select2-selection__choice__remove" role="presentation">×</span>
<span class="im_selected">John Doe</span>
</li>
<li class="select2-selection__choice" title="fdfsdfds">
<span class="select2-selection__choice__remove" role="presentation">×</span>
<span class="im_writein">fdfsdfds</span>
</li>
<li class="select2-search select2-search--inline ui-sortable-handle">
<input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;">
</li>
</ul>
But this isn't enough, as we need to access the parent LI, not the span child. And since CSS doesn't allow for parent selectors, we have to run some jQuery to make it happen. Because these are redrawn we'll want to run this function on both the select and remove events of the Select2 item:
$('.select2_sortable').on("select2:select", function (ev) {
updateSelectedParents();
});
$('.select2_sortable').on("select2:removed", function (ev) {
updateSelectedParents();
});
function updateSelectedParents() {
$('.im_selected').closest('li').addClass('im_connected_item');
$('.im_writein').closest('li').addClass('im_writein_item');
}
Finally resulting in:
<ul class="select2-selection__rendered ui-sortable" id="select2_rendered_smartselectbox_4">
<li class="select2-selection__choice im_connected_item" title="John Doe">
<span class="select2-selection__choice__remove" role="presentation">×</span>
<span class="im_selected">John Doe</span>
</li>
<li class="select2-selection__choice im_writein_item" title="fdfsdfds">
<span class="select2-selection__choice__remove" role="presentation">×</span>
<span class="im_writein">fdfsdfds</span>
</li>
<li class="select2-search select2-search--inline ui-sortable-handle">
<input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;">
</li>
</ul>
And allowing you to style your elements based on the im_writein_item and im_connected_item CSS classes.
You can access the tag container like this:
formatSelectionCssClass = function(tag, container) {
$(container).parent().addClass("my-css-class");
};
Use the formatResultCssClass, containerCssClass and dropdownCssClass options to specify classes in code, the adaptContainerCssClass and adaptDropdownCssClass options to specify classes in markup, or even the containerCss and dropdownCss options to specify inline style in code.
If you're wondering why you never used those, they weren't properly documented a while ago.
Reference: <http://ivaynberg.github.io/select2/>
For those that only want to change the color of some of the select2 boxes:
Instead of directly modifying the Select2 CSS properties of select2-choice directly, use the ID generated by select2 for the select2 div (this will be #s2id_yourelementid) to select its children carrying the select2-choice class.
For example, if I want to modify an element, #myelement, that I apply Select2 to, then to change the color, I would add the following to my css:
#s2id_myelement > .select2-choice{
background-color:blue;
}
Adding this CSS worked for me:
.select2-selection__choice {
background-color: red !important;
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0);
background-image: -webkit-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
background-image: -moz-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
background-image: -o-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
background-image: -ms-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
background-image: linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
-moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
color: white !important;
border: 1px solid #aaaaaa !important;
}
Example Fiddle:
http://jsfiddle.net/sajjansarkar/hvsvcc5r/
(yes I went crazy with the colors to demonstrate my point ;-) )
I use below
.form-control{
border: 1px solid #cccccc!important;
}
.select2-container .select2-selection--single {
height: 48px !important;
padding: 10px;
border-radius: 0px;
border: 1px solid #cccccc;
}
.select2-container .select2-selection--multiple {
height: 48px !important;
padding: 5px;
border-radius: 0px;
border: 1px solid #cccccc;
}