Earlier my question was:-
I have the following code in my Sass file
.random {
box-sizing: content-box;
text-align: center;
line-height: 1;
&:before {
display: inline-block;
margin-right: 0.2em;
width: 0;
height: 0;
border-right: 0.4em solid transparent;
border-left: 0.4em solid transparent;
content: "";
vertical-align: baseline;
}
}
.perc-neg:before {
border-top: 0.5em solid #FCB062;
}
.perc-neg.good:before {
border-top: 0.5em solid #98F1AC;
}
I have a div with
class = "random perc-neg good"
Now I want to change style of the above div. how to do it?
I tried following in console but it returns empty object
$("random perc-neg good:before").css("color","red");
$("random.perc-neg.good:before").css("color","red");
$(".random.perc-neg.good:before").css("color","red");
Someone has suggested its a possible duplicate but its not.
Int he related question, the user just wanted to make it visible or hidden so two classes will be sufficient.
But my requirement is to change the color as per user's choice which he can select from wide range of colors.
Its definitely impossible to define a class with each color changes.
And we cant pass some variable to css as well to change the color property accordingly.
Updated Question:
I am now using Sass.
I have defined an function to update the color
#function em($color) {
#return border-bottom: 0.5em solid $color;
}
.perc-neg.good:before {
em(#98F1AC);
}
definitely, I can call the function from the Sass file but how to call it from javascript
Now I want to pass the hex code of color from javascript
I need to pass something like this from javascript
.perc-neg.good:before(#98F1AC)
looked for the same in google did not find anything relevant
Instead of marking it as duplicate, it would be much better if you can provide a solution
Changing the style of pseudo elements are not possible because :after and :before are not part of the DOM technically. You need to find a work around or use additional classes to achieve this.
You can use less library which allows you to render css at run time here is a reference.
#Updated Answer
You can try doing something like this:
.perc-neg.good:before {
border-color: #BorderColor;
}
and call this method whenever you want to update the css like this:
less.modifyVars({
'#BorderColor': '#5B83AD'
});
Related
I'd like to have it so that whenever a user types a '#' into the search form, the '#' is styled a specific color.
I assume that the only way to do this would be to replace every instance of that character with a <span class="colorHash"></span> and to then apply the color to the class with css.
Is this possible? Can anyone point me in the right direction?
One solution would be to have an element that mimics a text input by looking as much like one as possible be placed over the actual input. This mimic would be updated every time the input changes, and include the color-changed hashes. It would have no pointer events, so clicking on it would allow the user to interact with the underlying real input.
Here is a reference implementation. It is by no means perfect, and I do not recommend copying code from it.
Good things:
Input data is stored unchanged in an <input> element, so works fine with forms.
Bad things:
What is shown is not an actual <input> element, but a mimic. This causes there to be no cursor (bad), and may cause other issues. It means all styling on input[type=text] should be on the mimic, too.
Slight input lag.
A slightly different way of doing this would be to have the mimic be invisible, except for the red hashes.
Here is a reference implementation. It is by no means perfect, and I do not recommend copying code from it.
Good things:
Removes lag on input
Cursor is visible
User sees the real input element (good in my book)
Bad things:
Red color lags (mostly visible when using the jQuery version of the code)
Likely much harder to maintain. The mimic must be positioned to pixel-perfection on top of the real input.
Since this seems to be closer to what you're looking for, I'll include the code for this version here...
This code is by no means perfect, and I do not recommend copying code from it.
<div id="wrapper">
<input type="text" id="data-input">
<pre class="text-input-mimic" id="shown-data"></pre>
</div>
#wrapper { position: relative; }
#shown-data {
/* Stacked in top-left corner */
position: absolute;
top: 0;
left: 0;
/* Clicking and typing goes through to real input */
pointer-events: none;
}
.text-input-mimic, input[type=text] {
border: 1px solid grey;
width: 250px;
height: 20px;
padding: 5px;
display: inline-block;
margin: 0;
font-family: Calibri !important;
font-size: 16px !important;
}
.text-input-mimic {
/* Make invisible except for hashes */
background: none !important;
border: none !important;
color: rgba(0, 0, 0, 0);
/* Pixel-perfect adjustments */
padding-top: 7px;
padding-left: 6px;
}
.colored { color: red !important; }
JS (jQ):
$('#data-input').on("change keyup paste", function() {
let inp = $('#data-input').val();
let modified = inp.replace(/#/g, '<span class="colored">#</span>');
$('#shown-data').html(modified);
});
Alternatively, JS (plain):
real = document.getElementById('data-input');
mimic = document.getElementById('shown-data');
real.addEventListener('input', function() {
let inputVal = real.value;
let modified = inputVal.replace(/#/g, '<span class="colored">#</span>');
mimic.innerHTML = modified;
});
How do you get a nice outline? This is similar to the question:
CSS/Javascript: How to draw minimal border around an inline element?
However, the accepted solution to that question results in jagged textboxes, as seen here:
http://jsfiddle.net/z9THQ/2/
/* p {
text-align: justify;
} */
.wrapped {
outline: 2px solid black;
box-shadow: 0px 0px 0px 2px rgba(0,0,0,1);
}
.wrapped span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
Even with justified text, the right edge is still jagged; it should look like a single line, like in the image below.
A pure CSS solution would be ideal, but if Javascript is necessary, that would be fine too.
A related symptom which a solution would ideally solve is the fact that the :hover attribute is not activated by the region in between two lines of text. Ideally, the whole section should feel like a text-area, only it is non-rectangular since it is inline with other text.
I am trying to change the border color of a textarea. I have used jQuery for doing so. Previously, I was using .css("border-color","rgb(250,0,0)"), and it was working fine. Now I am told not to use CSS in Javascript and use Class.
So I created one class named:
.redBorderColor{
border-color:rgb(255,0,0);
}
and in jQuery I used:
.addClass("redBorderColor")
When I checked it in browser, then I find class name is there in textarea's class attribute, but border color does not change. I have seen in firebug following class, from Pure CSS which was already implemented in project:
.pure-form select, .pure-form textarea {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 3px #ddd inset;
box-sizing: border-box;
display: inline-block;
padding: 0.5em 0.6em;
}
Question is that, I want my new style class to be implemented and previous one should be not considered or ignored. As of now, my style is cut off by firebug
Firstly note the typo; redBorderClass in your JS code should be redBorderColor.
That said, you also need to make the redBorderColor CSS class more specific so that it over-rules the other CSS styling. You can use either !important:
.redBorderColor {
border-color: rgb(255, 0, 0) !important;
}
Or you can make the selector more specific:
.pure-form textarea.redBorderColor {
border-color: rgb(255, 0, 0);
}
Note that the latter is better practice.
You have
.redBorderColor
while you are adding:
redBorderClass
Issue seems to me is a simple typo. You have defined your css selector as .redBorderColor, here you can see Color.
On the otherside when you are adding the class with js/jquery you have used redBorderClass not redBorderColor.
If you wanna ignore or not considered the previous class, then remove the current class and add your class.
.removeClass('pure-form').addClass("redBorderColor");
Then, put this into your class to keep the other configuration.
border-radius: 4px;
box-shadow: 0 1px 3px #ddd inset;
box-sizing: border-box;
display: inline-block;
padding: 0.5em 0.6em;
I'mm using https://select2.github.io/examples.html but I don't want the border radius.
How can I remove border radius to make the search box as well as the sliding area ?
You can add this css :
[class^='select2'] {
border-radius: 0px !important;
}
fiddle : http://jsfiddle.net/jEADR/1537/
Well I've just tried to do a trick basically in jquery as below and yea it works!!
Execute below 2 lines once you initialize your select2
$('.select2-selection').css('border-radius','0px')
$('.select2-container').children().css('border-radius','0px')
I really appreciate all the answers in this thread, as they helped me find a good solution.
I'm using Ruby on Rails 5.2.0, and I felt that any JQuery or JavaScript solutions felt a little hacky and after-the-fact especially since it should be doable in vanilla CSS - but I felt that using the CSS !important tag isn't best practice. Not trying to rag on anyone!
So, my CSS is as follows, and works well!
.select2-container--bootstrap .select2-selection{
border-radius: 0px;
}
Add this to your HTML Header:
<style type="text/css">
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle;
}
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
height: 28px;
user-select: none;
-webkit-user-select: none;
display: contents;
}
</style>
Open file select2.min.css located dist/css/select2.min.css. locate the border radius you wish to change. example change "border-radius:4px" to "border-radius:0px"
section of code from select2.min.css below
.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051;}
After a quick look through the CSS I can see 11 "border-radius:4px" change each one to "border-radius:0px" or just change the ones to the areas you wish. check CSS file.
Regards
Ben
I am using jQuery UI Autocomplate plugin as it is on the first example. I also have jQuery UI Theme style sheet referenced for other plugins.
This is the input I am using with that:
CSS:
div.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}
div.paddedInput {
padding: 5px;
border: 1px solid black;
background-color: white;
}
div.paddedInput input {
border: 0px;
width: 100%;
outline:none;
}
HTML:
<div class="formvalue">
<div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>
Here is my situation:
As the above div element serves as an input element (on the style perspective), the autocomplete list looks a little awkward because it sets itself for the input element.
I dug the source code which jQuery UI is creating for the autocomplete function and there is ui-autocomplete style class but as I said but I couldn't figure auto what should I override.
Any thoughts?
UPDATE:
Here is the jsfiddle sample:
http://jsfiddle.net/tugberk/YxRYe/4/
If you want to overwrite your style, you can use !important keyword as this code
div.paddedInput input {
border: 0px!important;
width: 100%;
outline:none;
}
I guess the main question here is why you would have the outer div element serve as an input element from a style perspective in the first place.
If this is not a requirement, just do this. Otherwise we'll have to use JS to set the width of the dropdown to the width of the div and adjust the position of the dropdown. A rather hacky solution i.m.o. I am not aware of a way to specify what element the dropdown should attach to since this is rarely what you want.