I have tag me box to add the tag.
http://jsfiddle.net/hailwood/u8zj5/
I was trying to change it's looks using css.
I wanted to create tags and box to look like in this code:
http://jsfiddle.net/hAz5A/20/
I added the css in first but does not make change. Can any css guys help me out?
Just add the css from the second fiddle into the first fiddle
Note: if you want to remove the 'x' - delete tag (for some reason) then add display: none to your tagit-close class
FIDDLE
FIDDLE without delete button
ul.tagit.ui-widget li.tagit-choice {
display: block;
float: left;
position: relative;
line-height: inherit;
border-radius: 6px;
background-color: #EFEFEF;
border: 1px solid #DDD;
padding: 5px 15px 5px 5px;
margin-right: 10px;
color: #08c;
text-decoration: none;
}
ul.tagit.ui-widget li.tagit-choice a.tagit-close {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}
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 achieve an input field with an underline. As it is visually more appealing to me, I'm trying to make underline as close as possible to the font. I did achieve the closeness, but now, input field cuts tail parts of the letters with tails. Is there a possible workaround for this? Can I cancel input's this behaviour with something like "overflow: visible"? Or may I draw a fake line over the input field, instead of using border-bottom? Thanks in advance.
In short, I'm trying to make text get through the bottom line.
Here is a screenshoot about the problem.
Here is my current class:
.kk_input {
border: 0;
border-bottom: 1px solid #000;
outline: none;
font-size: 20px;
height: 20px;
margin-top: 5px;
}
Without seeing the rest of your markup, this should give you an idea enough to go off of.
.kk_input {
border: 0;
outline: none;
font-size: 20px;
}
div {
position: relative;
}
div:after {
position: absolute;
content: "";
bottom: 4px;
left: 0;
height: 1px;
width: 100%;
background-color: black;
}
<div>
<input class="kk_input" type="text">
</div>
You can use more than one box-shadow to create this effect.
.so49204829_input{
line-height: 20px;
font-size: 20px;
padding: 8px 4px;
box-shadow: inset 0 -11px 0 #fff, inset 0 -12px 0 #000;
}
<input type="text" class="so49204829_input">
& here's another approach using a second element. Unfortunately, you can't add an :after pseudo-element to input elements (at the time of posting).
.so49204829_input {
line-height: 20px;
font-size: 20px;
padding: 8px 4px;
width: 200px;
display:block;
}
.so49204829_input_accent {
margin-top: -14px;
height: 1px;
width: 208px;
background-color: #000;
pointer-events: none; /* this makes sure click events aren't intercepted by the accent-line element */
}
<input type="text" class="so49204829_input"><div class="so49204829_input_accent"></div>
I wanted to try and create a bigger input and submit button box for a simple JS function for my course. However, when I changed the height and font size of my input my submit button no longer functions. I know it has to do with the height because when I remove it, it works. How can I work around this?
I will provide the URL for my website my CSS code that starts the input and the button is on line 273.
http://web.gccaz.edu/~pet2153867/test/
Thanks!
Add position: relative; and z-index:9999; to your button style.
button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
height: 50px;
position: relative;
z-index: 99999;
}
this problem caused by H1 Tag. h1 tag crosspvered with your button. removing bottom:70px will also fix your problem.
#projects h1 {
position: relative;
bottom: 70px;
}
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/
I've got a selection part where I have multiple font Awesome icons and the selected one has a bar underneath it.
That goes alright as long as I only have 1 row of icons. When I have multiple rows the "selected bar" is not visible anymore as the icon underneath is hiding it.
I'm not very strong in css and tried all the padding and margins I could think of but without much success. In the attached jsfiddle you can see the selector for the last two icons, but not for the first one.
What should I add to the css below so that I can have multiple rows of icons and still see the selector bar?
.icon-picker {
border: 0px solid #000000;
margin-right: 5px;
width: 24px;
height: 24px;
background-color: #FFFFFF;
padding-bottom: 4px;
}
.selected {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 2px solid #000000;
}
.icon-container {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
padding-left: 15px;
max-width: 300px;
}
Thanks for your time.
jsfiddle
You need to make the <i> tag a block element for the width and height to be applied to the element.
See fiddle
.icon-picker {
border: 0px solid #000000;
display: inline-block;
margin-right: 5px;
width: 24px;
background-color: #FFFFFF;
}