I would like to make my arrow tinnier. I was not able to change the font-weigth so not sure what to do. This is my code.
button {
height: 50px;
width: 50px;
font-size: 40px;
border: none;
background-color: transparent;
outline: none;
color: #000;
}
<button class="left-button" onclick="plusDivs(-1)">❮</button>
You should use font-awesome icon.
.slideshow .buttons button{
height: 50px;
width: 50px;
font-size: 40px;
font-weight:normal;
border: none;
background-color: transparent;
outline: none;
color: white;
}
If you want to keep the icon that you have and not use a font awesome icon like the above then do this:
.left-button {
font-size: 20px; (adjust as needed)
transform: scale(.5, 1); (adjust as needed)
}
Link about transform scale property: https://www.bitdegree.org/learn/css-transform
Demo:
Before: https://jsfiddle.net/ne7mpufj/1/
After: https://jsfiddle.net/ekhm14r0/2/
You'll have to adjust the values in the font-size and transform scale property as needed but that should help get it working for you.
Related
I'm using Contact Form 7 on a website of a client, and I styled the dropdown menu to this:
.wpcf7-form select {
-webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}
Unfortunately the arrows are missing now. Is there anyway to add an down arrow at the right side of the dropdown menu in the same color as the text? I tried different css classes found on this website, but nothing seems to work.
Image of how it displays now:
And how it should be:
The arrow could also be another arrow.
Any help would be appreciated much!
Regards,
Vasco
Here's an option for you... now... I used the span.wpcf7-form-control-wrap that was specifically around the select I was styling. You could also (instead) wrap the selects in a custom div.
This produced this result for me
I also made the triangle using clip-path, so you can change the colors or anything else.
/* Using the menu-813 which for me was the span around the select.*/
span.wpcf7-form-control-wrap.menu-813 {
position: relative;
height: 60px;
background: #e9edf0;
display: inline-block;
}
span.wpcf7-form-control-wrap.menu-813:after {
content: '';
position:absolute;
width: 15px;
height: 15px;
background: #000;
right:8px;
top: 20px;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.wpcf7-form select {
-webkit-appearance: none;
appearance: none;
color: #72858a;
font-size: 0.7777777778rem;
background-color: transparent;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
z-index: 1;
position: relative;
padding-left: 2ch;
}
I'm trying to keep the unicode ace of hearts U+1F0B1 white with a green body background. I'm thinking that I need to create a div with the same size as the card and set that to white. Is there a better way to do this?
This is the sample way. but you need to adjust the "text-indent" and the "letter-spacing" depending on the font-size of the unicode.
See code below
body {
background: grey;
}
i {
position: relative;
display: inline-block;
}
i::before{
content: "\1F0B1";
font-style: normal;
color: white;
display: block;
line-height: 0.8;
font-size: 150px;
background: green;
letter-spacing: -10px;
text-indent: -10px;
}
<i class="heart"></i>
You can do it in a single HTML element as well, with a pseudo-class. Similar to how icon sets work these days.
i {
background: green;
font-style: normal;
padding: 2px 4px;
}
i::before {
content: "\1F0B1";
color: white;
}
<i class="heart"></i>
I'd to like to setup a rounded button with an ionic icon in the center.
I have something like that:
button {
color: white;
&.button-rounded {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid white;
border-radius: 50%;
color: white;
text-align: center;
text-decoration: none;
font-size: 10px;
font-weight: bold;
}
}
And the html:
<button class="button button-clear icon ion-home button-rounded"></button>
But the result is something like that:
Any help, please?
The problem is with the font size of the icon which is bigger than the rounded button. You can reduce the font-size to 24px and line-height to the same value in order to fit the icon exactly inside the circle. Increased the specificity of the overriding selector to avoid !important
.bar .buttons .button.button-icon .icon::before, .bar .buttons .button.button-icon::before, .bar .buttons .button.button-icon.icon-left::before, .bar .buttons .button.button-icon.icon-right::before {
font-size: 24px;
line-height: 24px;
}
Updated Codepen
SASS version:
.bar .buttons .button.button-icon {
.icon::before, &::before, &.icon-left::before, &.icon-right::before {
font-size: 24px;
line-height: 24px;
}
}
I'm trying to create a custom checkbox only using css and no images, but I am having a bit of trouble.
I followed a few tutorials online, but I seem to have hit a road block and help would be great.
My css looks like this
input[type='checkbox'] {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 3px;
border: 1px solid #555;
position: relative;
bottom: .3em;
}
input[type='checkbox']:checked {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 5px;
position: relative;
bottom: .3em;
-webkit-transform: rotate(45deg);
}
What keeps happening is when I do the rotate the whole box rotates and I have tried adding a :after to it, but it didn't seem to do anything.
You could use a unicode check, or even an icon font if you want to get really fancy...
input[type='checkbox'] {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 3px;
border: 1px solid #555;
position: relative;
bottom: .3em;
}
/* added content with a unicode check */
input[type='checkbox']:checked:before {
content: "\2713";
left: 0.2em;
position: relative;
}
Demo
As a matter of fact I tried the same thing on my website (http://e-home.mx) but I ended up hiding the input element with css and adding a label to each one which is the one that "emulates" its behavior like this:
HTML
<input type="checkbox" id="c8" name="c8" />
<label for="c8"><span></span>Label here</label>
CSS:
input[type="checkbox"] + label{color:#000;font-family:Arial, sans-serif;}
input[type="checkbox"] + label span{
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") left top no-repeat;
cursor:pointer;
}
input[type="checkbox"] {display:none}
input[type="checkbox"]:checked + label span {
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") -19px top no-repeat;
}
Here is the fiddle:
http://jsfiddle.net/xedret/bTAGU/
My web site http://maximearchambault.com
I will like to have the same color background size for my 3 section, commercial, personal project and info / contact. The blue need to be 180 pixels.
/* section title */
#index span.section_title,
#index span.section_title a { color: #000000; font-weight: bold; background: #00FFFF; }
This is located in my style.css.
Color has no size. If you want to enforce certain measures, use width (or height) respectively, i.e. width: 180px;
on line 75 of your style css -
#index span.section_title, #index span.section_title a {
color: black;
font-weight: bold;
background: cyan;
width: 180px; //add this
display: block; ///add this
}
you may want to add it to the span only, in which case add a new rule -
#index span.section_title {
width: 180px; //add this
display: block; ///add this
}
Just try this
#index ul.section {
font-size: 10px;
margin-bottom: 1em;
border: 1px solid #636363;
background: cyan;
width: 180px;
}