Im used my angular project for this ngx-international-phone-number, I tried to add style, but its not worked for me, anyone know how to add correctly css on this input
Look my image, button and input filed is not aligned
StackBlitz here
<international-phone-number class="mystyle form-control form-control-sm" placeholder="Enter phone number" [maxlength]="20" [defaultCountry]="'us'" name="phone_number" [allowedCountries]="['in', 'ca', 'us']"></international-phone-number>
css
.mystyle .dropbtn {
background: #2196f3;
color: white;
border: none;
cursor: pointer;
}
.mystyle .form-control {
display: block;
width: 100%;
padding: 0.4375rem 0;
font-size: 1rem;
line-height: 1.5; margin: 0px 5px;
color: #495057;
background-color: rgba(0, 0, 0, 0);
background-clip: padding-box;
border: none;
border-radius: 0;
box-shadow: none;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
You need add :host ::ng-deep { *your css* } before your style.
And change app.component.css > app.component.scss
https://stackblitz.com/edit/angular-add-style
Hope it helps you.
You can use ng-phone-number instead of ngx-international-phone-number, its basically an extension of ngx-international-phone-number but its updated and well maintained with language support and issues fixed quickly upon feedback. Flag issues is also fixed here.
Here is the link of library https://www.npmjs.com/package/ng-phone-number
Related
I would like to look every button to look by default like btn-outline-secondary
See Bootstrap5 Outline Buttons
Example:
<form>
<button>foo</button>
</form>
this button should get the styling like btn-outline-secondary.
How can I achieve that?
BUT: I can't modify the HTML snippet, since it gets generated by a library. I would like to use JS/CSS to achieve the goal.
Background: I am using BS5 and don't need to support dated browsers like IE11.
How about this?
(function applyDefaultClassesToButtons() {
var buttons = document.getElementsByTagName("button");
for (i = 0; i<buttons.length; i++) {
buttons[i].classList.add("btn");
buttons[i].classList.add('btn-outline-secondary');
}
})();
Here is a JSFiddle example
simply apply the style that you take from bootstrap:
button {
display: inline-block;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
color: #6c757d;
border-color: #6c757d;
}
button:hover,
button:active {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
button:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgb(108 117 125 / 50%);
}
<form>
<button>foo</button>
</form>
If you have some CSS preprocessors like LESS or SASS, you could do something like this:
button {
.btn;
.btn-outline-secondary;
}
If not, I think JS is the only right way as #momh answered.
Basically you could simply use your CSS with the colors you desire. In this case i think you like the colors of that BS5 button.
button {
font-family: Ubuntu, sans-serif;
display: inline-flex;
font-weight: 400;
line-height: 1.5;
text-decoration: none;
justify-content: center;
align-items: center;
align-content: center;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid #6c757d;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: .25rem;
transition: color .15s cubic-bezier(.23,.97,.83,.67), background-color .15s cubic-bezier(.23,.97,.83,.67), box-shadow .15s cubic-bezier(.23,.97,.83,.67);
color: #6c757d;
}
button:hover,
button:active {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
button:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgb(108 117 125 / 50%);
}
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
<form>
<button>SAVE</button>
<button>NEXT</button>
<button>Secondary</button>
</form>
If you can use CSS preprocessors (I can't write comments as of now), then I would suggest using one, I know that SASS and LESS have a way of extending selectors. This way you could apply your rule to the the button selector.
It is a way better solution than simply copying the rules since the library can change and you probably dont want to check every update whether you should change your selector or not.
And if you want to change only the button in the form, then you might either write a more complex selector, or a better solution would be adding a wrapper around the snippet you can't change.
If CSS preprocessors are out of question, then my answer would be checking out the answer of #Momh
I'm trying to style a button by writing my own css but also using Tailwind for other styles.
My code for the button is as follows but some of the elements are crossed out.
button {
margin-left: 10px; /*crossed out*/
padding: 5px 25px; /*crossed out*/
background-color: rgba(2,68,62,1); /*crossed out*/
border: none;
border-radius: 10px;
cursor: pointer; /*crossed out*/
transition: all 0.3s ease 0s;
}
Is it because Tailwind already has default values for button? I know using !important is bad practice so how do I fix this? My html for the cta button is:
<a class="cta" href="#"><button>CONTACT</button></a>
If I reference .cta in my css, I can't change the actual CONTACT text; I wanted to use text-decoration: none.
I did set a * at the top of my css.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #b3b3b4;
}
I am working on a new button styles and currently facing a challenge: my <button> CSS :hover selector is not behaving as expected.
All attempts to making it work have proven futile.
How can I possibly achieve that effectively?
Below is my code:
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif)
no-repeat;
border: 0;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background-color: #959595;
}
Simply use background for your hover; not background-color as illustrated in the snippet below:
.button_depression:hover {
background: #959595;
}
Brief summary:
background CSS property is a shorthand to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.
When working without the shorthand, the background-image property supersedes background-color and as such, setting background-color alone without abnegating it (background-image) will result in its precedence.
In other words, background-image: none; in combination with background-color: #959595; will work. (Refer to snippet below)
.button_depression:hover {
background-color: #959595;
background-image: none;
}
(background-image: unset; works well too, but can't tell if supported by all browsers)
Note that you can be achieved the same, using the background shorthand, simply as above, with background: #959595; (which I prefer: simple, less verbose, same result).
More details here ....
You can't see the button hover changing the background color due to the background image. You can set the button image to None on hover and then change the color. This might be what you want. Alternatively you can just set background to the background color you wanted. Your preference how you want to acomplish this.
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif) no-repeat;
border: 0px;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background: None;
background-color: #959595;
}
.click{
padding: 10px;
border: 2px solid #e4910c;
border-radius: 200px;
transition: background-color 0.1s;
}
a:hover{
background-color: #e4910c;
color: white;
}
I tried to set everywhere in border to #e4910c; But the text has padding. So I only can set text's background color to #e4910c, not everywhere in the border.
How to do that? Thank you in advance
I'm not quiet sure about what you want, but let me know if this will suit you:
using only a instead of two tags (which I understand you are using)
Snipet
a {
padding: 10px;
border: 2px solid #e4910c;
border-radius: 200px;
transition: background-color 0.1s;
display:inline-block; /* demo purposes - optional */
color:#e4910c;
text-decoration:none;
}
a:hover {
background-color: #e4910c;
color: white;
}
Text link
I'm going to add the tooltip for the input text in the page, this page has their own css!
my code is work on local machine but when i pasted code on that page it doesn't work, it seems there is a conflict on the page, but i've ran out of finding the issue.
the js is :
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
});
});
</script>
the css is :
#myform {
}
.tooltip{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background-color: #fff;
border: 1px solid;
position: absolute;
border-color: #bbb #bbb #a8a8a8;
padding: 16px;
width: 255px;
line-height: 17px;
opacity: 0;
left: 16px;
top: 48px;
-webkit-transition: all 0.218s;
-moz-transition: all 0.218s;
-o-transition: all 0.218s;
transition: all 0.218s;
}
and the code is :
<form id="myform" action="#">
<!-- username -->
<label for="username">Username</label>
<input id="username" title="Must be at least 8 characters."/>
</form>
and below is the current input css of the page:
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
color: #000;
font-size: 1.4rem;
font-size: 14px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
padding: 8px 10px 8px 46px;
width: 83%;
}
You can overwrite style by adding your own .tooltip style and overwriting each style using !important . do it for each style in .tooltip. hope this help. here is a simple JSFiddle example.
.tooltip{
background-color:red !important;
}