This question already has answers here:
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed 6 years ago.
So i am trying to customize a full dropbox (Country Selector) instead of the regular look, I want to add a diferent design to it.
Regular design
[
The Design I want
The first image is the default version with color adjustments, its the version that is working on the website, I want to make the design look like the 2nd picture i've uploaded.
The second version is what I got on photoshop, how i do customize my <select> to the 2nd picture? here is the code i got on css, I tried to use ::webkit and it didn't work.
CSS
.paistofill option {
background-color:#a5e4c9;
font-weight: normal;
white-space: pre;
min-height: 0.0em;
padding: 0px 0px 0px;
border-radius: 50px;
}
.paistofill select{
background-color: white;
color:#a5e4c9;
border-radius: 50px;
}
The select customization has no effect on the element, what do I need to do?
For this you need to use a plugin (or make it yourself) like https://select2.github.io/. You can't really customise the dropdown of the select reliably in every browser. These plugins usually replace and make div elements of the select (and the dropdown) which acts like the normal select. Then you can easily modify these elements with css.
Related
This question already has answers here:
What's so bad about in-line CSS?
(20 answers)
Closed 6 years ago.
I see this happening more and more often.
I was always taught to keep html, css and javascript separate (with html linking to the sources/scripts of course).
I understand sometimes if you're sending an email then using the style attribute in html is sometimes ok and preferred.
However when constructing a website, or application is it considered bad practice to use the style attribute?
<div style="margin: 0 auto; width: 114px; height: 32px; text-align: center; font-family: arial; padding: 25px; border-radius: 50px; line-height: 32px; background: rgb(46, 154, 255);">Hello world</div>
Yes, it is bad practice. Here are a few reasons:
You cannot reuse css code if it is inline (it only applies to the element it is on) so you land up writing extra code that does the same thing (e.g. you have two paragraphs of text that need to be styled the same - if you use the style attritibute you now have to copy and paste the style for each paragraph.)
Your code will be harder/impossible to maintain - imagine if you had to change the font on your page. If it is declared inline like this it means going to each place to find and change the code.
You cannot easily override the CSS styles. Properties that are declared inline have the second highest priority. The only way to override a property declared inline in a CSS stylesheet is by using the !important keyword.
I have changed the font size on my Kendo grid to 11 and by doing so, the calendar icon on a datepicker textbox gets cut off at the bottom. I was able to move the icon up using margin-top when you hover over it with the following code, however I am not able to figure out how to get it moved up in just its normal state.
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar{
background-position:-48px -176px; margin-top: -6px;
}
See example: http://jsbin.com/ufimom/592/edit
Try this,
.k-i-calendar {
background-position: -32px -176px;
margin-top: -6px !important;
}
Demo : http://jsbin.com/ufimom/596/edit
I have a highly personalized Kendo stuff. Custom styling is one of the biggest problems of kendo (along with million other issues that you will find once you start using kendo at a big scale). To minimize the size of the stylesheets they have combined a lot of styling of different controls into few files. Although its a good thing but it makes the custom styling (and then updating in the future) a nightmare. Knowing how ":not", ">", ":first", ":first-of-type", etc. work in css will really help you with styling of the grids and other controls.
I usually write separate stylesheets to override kendo styling (by using a lot of !important keyword in my override css). It helps when I update kendo.
Without seeing your html and background image in context, I'm just taking a guess here. Try appending the normal state of the calender icon to your css rule like this,
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar, .k-i-calendar { background-position:-48px -176px; margin-top: -6px; }
DEMO
EDIT: As the previous poster mentioned, !important is likely the best solution here, in order to override the Kendo settings. Example:
.k-i-calendar {
margin-top: 0px !important;
}
DEMO here: http://jsbin.com/ufimom/598/
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Styling select options
I am wondering if it is possible to apply two styles within an option element? For example, in my code below, I would like my product name to be of style color:black; while the price be of another style color:red; font-weight:bold;. I have tried wrapping my price around span.price but that did not work.
<select>
<option>Apple <span class="price">$1.00</span></option>
<option>Banana <span class="price">$2.50</span></option>
<option>Cherry <span class="price">$1.50</span></option>
</select>
option styles are styled in a way native to the platform. You cannot do what you desire without changing the markup (and/or using JavaScript)
Try this CSS in the of your HTML document, or in your external stylesheet (strip out the <style> tags if you put it in an external stylesheet):
<style type="text/css">
select option { color: black; }
select option span.price { color: red; font-weight:bold; }
</style>
By doing this, you are basically saying "All options in my select should have black text color". Then, you're overriding that by saying "Any spans with a class of "price" inside an option inside my select should have a red text color."
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Is it possible to convert Elements I created with Photoshop.
f.e. If I created a "skin" for a button in Photoshop without any Text in it. Could I convert it to CSS so that I can add a Text and adjust the Button's height/width later when adding the button to the HTML?
If it is possible, how?
Thanks in advance!
there are a lot of tutorials that will teach you to slice photoshop to html & css
http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
http://net.tutsplus.com/articles/news/photoshop-to-html-upcoming-ebook-from-nettuts-and-rockable/
but to answer your question. It all depends the button you designed. But for the standards wone you will have to copy the background of your button into a new document and save as a png or jpg (make sure to slice a 1 or 3px image that can be repeated)
and then with some css3 magic you can style your button and make sure it fits the content of your button.
eg:
input[type="text"]
{
/*add rounded corners*/
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:#000 url('../images/button-background.jpg') repeat-x top left;
paddng:3px 6px;
margin:2px 0;
}
the url to the background should point to the image and best add a matching background color when the button is to big
What you're trying to do has many, many different solutions. Here are just a couple:
1. You could create the button using css3 only
warning: this solution will not work on older browsers without javascript plugins
html
Hello World
css
.button {
border:solid 2px white;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow:5px 5px 5px black;
box-shadow:5px 5px 5px black;
padding:20px;
background:lightgray;
color:darkgray;
}
2. You could create the button using 2 images
photoshop:
create the image of the left side of the button.
make sure it's much longer than it needs to be.
the right end doesn't matter:
___________________________
/
| button1.png ...
\___________________________
now create the right side of the button.
make sure it's very short, like below:
_____
\
... button2.png |
_____/
html
<a href="http:/my.url.com/" class="button">
<span>Hello World</span>
</a>
css
.button {
background: url(path/to/button1.png);
}
.button span{
height: (height-of-button2.png);
line-height: (height-of-button2.png);
padding: 0 20px;
background: url(path/to/button2.png) no-repeat right top;
}
These are just a couple variations.
EDIT: apologies. the above code was wrong. i fixed it just now.
No, it's not possible to convert directly from Photoshop Elements to a HTML and CSS version that scales. You need to either export the whole button as one big image (and use a separate image for each button), or construct the button yourself with CSS.
Sexybuttons - http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html would let to create a button in Photoshop and once you have built it in CSS it would adjust its width to whatever text you put in it, as for height...not sure.
It's not a good idea to use Photoshop for creating code. It creates god awful looking code. It's best to just slice and name your slices, save them to images and then write code by hand. Unfortunately it's a very manual process and bridging the gap between design and code isn't something humans have done well yet!
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Styling the DD tag
Is it possible to HAVE a bullet in front of a <dd> tag just like <li> i cannot use <li> because i need to validate and <dl><dt>and <dd> is just fine
You could achieve it with a background image.
dt { background: transparent url(bullet.png) no-repeat; padding-left: 20px; }
EDIT: added padding-left.
By default a definition list doesn't have bullets. But you can use an image like jessegavin suggested. Remember about margins, paddings and .png problems with IE6 when you use a solution like this.
Good luck.
Shouldn't it be possible to play around with CSS like this?
dt:before {
content: "•";
position: ...;
margin: ...;
}
This is not nice, but... well, using a definition list element if you do not actually want a definition list to be shown is ugly anyway.