I used my angular 6 project for the ngx-image-cropper that one is working fine, I try to change that cropper style but its not a change , any one know how to do that correctly
I used this style
.cropper .move {
width: 100%;
cursor: move;
border: 2px solid red;
}
Try to add style in parent component (index.html) OR global CSS (styles.css) with the important attribute.
index.html
.cropper .move
{
width: 100%;
cursor: move;
border: 2px solid red !important;
}
Related
Am using Angular 6 App. I want to change the style of ng-multiselect-dropdown. If i override the style using inline,external and internal, it does not affect anything. Only if i change the style in node modules the change effects in UI. But it is not the correct way.How should i achieve this?
style.css
.multiselect-dropdown .dropdown-btn .dropdown-down {
display: inline-block;
top: 10px;
width: 0;
height: 0;
border-top: 5px solid #adadad;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
you can use !important to you custom ccs inside style.css file
like:
display: inline-block !important;
second solution you can make component ViewEncapsulation.None
I thing this may work..
I have a CSS-stylesheet that contains several classes to style accordion elements. Due to several restrictions in the editor software I am forced to use, I need to embed other accordions via JavaScript.
This script only allow me to use three CSS classes to style the accordion. I would like to give them a similar style like those created by the editor.
My problem is that I can't figure out how to 'break down' the following multiple classes (those from the editor software) to the three new classes (those for the JS) to get a similar style of the accordions.
Existing CSS classes from the editor:
<cc:*> Accordeon </cc:*>
.sqracc {
box-sizing: border-box;
margin: 0 auto 30px auto;
max-width: 1400px;
}
.sqracc .sqracchead {
box-sizing: border-box;
margin: 0 30px;
padding: 0;
border-bottom: 1px solid <cc:print value="site.properties.design.boxborder">;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.sqracc .sqracchead:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.sqracc .sqracchead div {
padding: 10px 20px 10px 32px;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
cursor: inherit;
float: left;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
min-width: 30%;
-webkit-user-select: none;
user-select: none;
}
.sqracc .sqracccontainer {
display: none;
}
.sqracc.sqraccopen .sqracccontainer {
display: block;
}
.sqracc.sqraccopen .sqracchead div {
background-image: url(<cc:print value="&accopen.svg.filename">);
}
#media screen and (max-width: 767px) {
.sqracc .sqracchead {
margin: 0;
padding: 0 30px;
}
}
And this are my new classes:
.bar {
}
.baropen {
}
.content {
}
I tried the following but it didn't work:
.balken {
box-sizing: border-box;
cursor: hand;
cursor: pointer;
padding: 10px 20px 10px 32px;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
cursor: inherit;
float: left;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
min-width: 30%;
}
.balkenopen {
cursor: hand;
cursor: pointer;
background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat;
}
.inhalt {
padding: 10px;
}
[EDIT]
here is the JS which I embedded in the code of the editor:
<script type="text/javascript" src="<cc:print value="&ddac.url">">">
</script>
<cc:if cond="¶.properties.design.ddaccor.first.default.open">
<cc:set value="0" obj="para.properties.design.ddaccor.first.default.open"></cc:if>
<script type="text/javascript">
<cc:if cond="&topic.properties.design.ddaccor.scrolltop"><cc:set value="true" obj="scrollstatus"><cc:else><cc:set value="false" obj="scrollstatus"></cc:if>
<cc:if cond="&topic.properties.design.ddaccor.default.open gt 0"><cc:set value="&topic.properties.design.ddaccor.default.open-1" obj="topic.properties.design.ddaccor.default.open"></cc:if>
//Initialize first Default Open :
ddaccordion.init({
headerclass: "bar", //Shared CSS class name of headers group
contentclass: "content", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [<cc:print value="&topic.properties.design.ddaccor.default.open">], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
scrolltoheader: <cc:print value="&scrollstatus">, //scroll to header each time after it's been expanded by the user?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["bar", "baropen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "<cc:print value='&topic.properties.design.ddaccor.slide.speed'>", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
As you can see this script have given classes. And I cant figure out how to edit those classes in order that they create a similar style like the accordion style classes in the editor CSS.
There is only one CSS file for the whole page.
[/EDIT]
I don't know this type of editor but you have two ways to achieve what you want:
Solution#1:
If there is a reference for the editor css
just put it before your customized css reference e.ge
<html>
<head>
<link rel="stylesheet" href="editor.css">
<link rel="stylesheet" href="YourCustomizedStyle.css">
</head>
<body>
</body>
</html>
This will make your style override the editor style
Solution#2:
Use !important on your CSS (I do not prefer this way) like this:
.balken {
box-sizing: border-box !important;
cursor: hand !important;
cursor: pointer !important;
padding: 10px 20px 10px 32px !important;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
cursor: inherit !important;
float: left !important;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat !important;
min-width: 30% !important;
}
.balkenopen {
cursor: hand !important;
cursor: pointer !important;
background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat !important;
}
.inhalt {
padding: 10px !important;
}
I saw this topic but it wasn't of any help: "html, css - cursor - how to change default image for pointer".
Is there any way I can use CSS to resolve this issue, b/c I'm not allowed to use JScript on someone else's website where I am configuring my profile on. I can only use CSS Markup and HTML Markup. There can't be a way to use JScript in the CSS Markup, right?
Description: When the arrow cursor is over other elements, the pointer cursor pops in and I need that pointer cursor changed to a custom cursor.
This is the cursor I want:
What may work, but I don't how to put it in my code below and nor do I know what to replace (my_cursor.svg) with: body { cursor: url(my_cursor.svg), auto; }
body , html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center;
background-size:contain;
cursor: url('http://www.rw-designer.com/cursor-view/21962.png'), url('cute25.cur'), help;
}
div#mask {
cursor: not-allowed;
z-index: 999;
height: 100%;
width: 100%;
}
That part of my code wasn't the problem at all. It was this line that I had as part of the rest of my css that I did not post on this question:
.contentModule { color: #FF00FF; border: 1px solid transparent; background: transparent; li {cursor: pointer}}"
I had "...cursor: pointer; }" instead of "...li {cursor: pointer}}".
I have a lot of forms on my website with, of course, many of the fields in them being required. If required field is left empty, it is assigned an 'error' class and I'm trying to circle the field in red regardless whether it is a text field, drop down menu or a checkbox.
I have the following code in my css file:
.error input, .error select, .error textarea {
border-style: solid;
border-color: #c00;
border-width: 2px;
}
Now strangely enough that works well in IE but in Chrome the checkboxes are not circled in red although I can see that the CSS is applied to them when inspecting the element.
And this might be irrelevant at the css code above is active but I do have something else in my css file:
input[type=checkbox] {
background:transparent;
border:0;
margin-top: 2px;
}
And that is used so that the checkboxes are displayed correctly in IE8 and less.
Any ideas how I can visualize the red border in Chrome?
EDIT:
Here's a jsfiddle:
http://jsfiddle.net/PCD6f/3/
Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):
input[type=checkbox] {
outline: 2px solid #F00;
}
Here's the jsFiddle
Specifically for a checkbox use outline: 2px solid #F00;, BUT keep in mind that the border will still be visible. Styling input fields to look them well across multiple browsers is tricky and unreliable.
For a completely custom styled checkbox, see this jsFiddle from this Gist.
EDIT Play with: outline-offset: 10px;
Check Box, and Radio Button CSS Styling Border without any image or content. Just pure css.
JSFiddle Link here
input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}
/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}
Works for me.only outline doesn't work.
input[type=checkbox].has-error{
outline: 1px solid red !important;
}
I'd like to create a button that changes its style when it gets pressed. This is my CSS code:
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
<button>Button</button>
It is changed only when I click & hold on it. I want to make it change style after it's pressed. For example, normal state would be white, state while being clicked would be green and after click is released it would be red.
You can do this if you use an <a> tag instead of a button. I know it's not exactly what you asked for, but it might give you some other options if you cannot find a solution to this:
Borrowing from a demo from another answer here I produced this:
a {
display: block;
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
a:active {
font-size: 18px;
border: 2px solid green;
border-radius: 100px;
width: 100px;
height: 100px;
}
a:target {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
<a id="btn" href="#btn">Demo</a>
Notice the use of :target; this will be the style applied when the element is targeted via the hash. Which also means your HTML will need to be this: <a id="btn" href="#btn">Demo</a> a link targeting itself. and the demo http://jsfiddle.net/rlemon/Awdq5/4/
Thanks to #BenjaminGruenbaum here is a better demo: http://jsfiddle.net/agzVt/
Also, as a footnote: this should really be done with JavaScript and applying / removing CSS classes from the element. It would be much less convoluted.
You could use :focus which will remain the style as long as the user doesn't click elsewhere.
button:active {
border: 2px solid green;
}
button:focus {
border: 2px solid red;
}
Should we include a little JS? Because CSS was not basically created for this job. CSS was just a style sheet to add styles to the HTML, but its pseudo classes can do something that the basic CSS can't do. For example button:active active is pseudo.
Reference:
http://css-tricks.com/pseudo-class-selectors/ You can learn more about pseudo here!
Your code:
The code that you're having the basic but helpfull. And yes :active will only occur once the click event is triggered.
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
This is what CSS would do, what rlemon suggested is good, but that would as he suggested would require a tag.
How to use CSS:
You can use :focus too. :focus would work once the click is made and would stay untill you click somewhere else, this was the CSS, you were trying to use CSS, so use :focus to make the buttons change.
What JS would do:
The JavaScript's jQuery library is going to help us for this code. Here is the example:
$('button').click(function () {
$(this).css('border', '1px solid red');
}
This will make sure that the button stays red even if the click gets out. To change the focus type (to change the color of red to other) you can use this:
$('button').click(function () {
$(this).css('border', '1px solid red');
// find any other button with a specific id, and change it back to white like
$('button#red').css('border', '1px solid white');
}
This way, you will create a navigation menu. Which will automatically change the color of the tabs as you click on them. :)
Hope you get the answer. Good luck! Cheers.
You can do this with php if the button opens a new page.
For example if the button link to a page named pagename.php as, url: www.website.com/pagename.php the button will stay red as long as you stay on that page.
I exploded the url by '/' an got something like:
url[0] = pagename.php
<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'] )+1,strlen($_SERVER['REQUEST_URI']))); ?>
<html>
<head>
<style>
.btn{
background:white;
}
.btn:hover,
.btn-on{
background:red;
}
</style>
</head>
<body>
Click Me
</body>
</html>
note: I didn't try this code. It might need adjustments.
Maybe :active over :focus with :hover will help!
Try
button {
background:lime;
}
button:hover {
background:green;
}
button:focus {
background:gray;
}
button:active {
background:red;
}
Then:
<button onkeydown="alerted_of_key_pressed()" id="button" title="Test button" href="#button">Demo</button>
Then:
<!--JAVASCRIPT-->
<script>
function alerted_of_key_pressed() { alert("You pressed a key when hovering over this button.") }
</script>
Sorry about that last one. :) I was just showing you a cool function!
Wait... did I just emphasize a code block? This is cool!!!