I'm using the combobox control:
http://demos.telerik.com/aspnet-mvc/razor/ComboBox?theme=vista
And I want it to be not white, like it is now. Which css property can do this? Is it possible?
I want it to look like this:
You should be able to achieve that with a custom background color on the select element and some rounded corners on its container. Try placing the combobox in a containing DIV and give it these CSS styles:
.rounded {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 5px;
background: #333;
}
.rounded select {
width: 100%;
background: #333;
color: #fff;
border: 0;
outline: 0;
}
http://jsfiddle.net/mpHgR/1/
It might be a little off, but it's close to what you want.
Related
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
The selection button as shown in the image below is not showing in my css set up for the select option of the website.
http://www.thefixedgearshop.com/nl/frames/aventon-frames/aventon-cordoba-frameset-wit
Select option without the button:
Select option with button:
Button that is missing:
Here is the CSS code for the option:
product-options dd select {
width: 100%;
border: 2px solid #aab2bd;
background-color: #f4f4f4;
width: 100%;
border: 2px solid #aab2bd;
color: #666;
font-size: 13px;
padding: 9px;
border-radius: 3px;
border: 1px solid #999;
-webkit-appearance: none;
cursor: pointer;
A way I've seen custom dropdowns done before is by using the little drop caret as a background-image with a background-position value of whatever puts it in the right place for your design.
Have a look at the pages linked below.
Background-image attribute W3Schools
Background-position attribute W3Schools
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 want to make ajax Calander control in bigger size by overriding the style of default ajax Calender.
It should be work in larger view. I tried but its not working well when I tried to select month/year view..
Here I attached screenshot what exactly I want to do with ajax calender control.
Will it possible to make it larger view for iPad website?
OR Suggest me good calender control for Ipad website, I want to use asp.net website.
Thanks
abhishek
i have just been through this myself. there are a 3 things you need to do.
First - add a css class to your control. But beware if you do this it wipes the existing class of ajax__calendar and so most of its existing styling so add to the CalendarExtender
CssClass="ajax__calendar bigcal"
where bigcal is your new class.
Second - add your css for the styling using the bigcal class - e.g.
.bigcal .ajax__calendar_container { width: 220px; font-size:14px;}
.bigcal .ajax__calendar .ajax__calendar_container {border: 3px solid #646464;}
.bigcal .ajax__calendar_days, .bigcal .ajax__calendar_months, .bigcal .ajax__calendar_years, .bigcal .ajax__calendar_body
{width:220px;height:200px}
.bigcal .ajax__calendar_month, .bigcal .ajax__calendar_year{height:55px;padding-top:4px}
.bigcal .ajax__calendar_container table, .bigcal .ajax__calendar_container TD {font-size:14px}
.bigcal .ajax__calendar_days td div{padding:4px 5px 4px 4px}
Notice i have reset the size of it to 220 wide and 200 high - adjust accordingly
Third - you need to change the size of it in the javascript, cos it defaults to a set size for the scrolling etc to work. so
Add the following to the CalendarExtender
OnClientShown="setBigCal"
and then the following js function
function setBigCal(sender, e) {
sender._height = 200;
sender._width = 220;
}
HTH :)
EDIT - Sorry - just seen the date on this question so i assume you are already sorted. But I will leave the answer up incase anyone else gets the same issue.
i know my answer is late. i know you are asking about ajax calender. but it may help others. several programmers ask how to format asp.net calender. You can format asp.net calendar using following styles:
.calander {
background-color: whitesmoke;
border: 1px solid;
height: 305px;
width: 280px;
}
.calander table tr td {
padding: 10px;
}
.calander table tr td:hover {
background-color:rgb(200, 255, 0);
}
.ajax__calendar_today {
background-color: rgb(209, 233, 255) !important;
border-radius: 3px;
}
.ajax__calendar_footer {
background-color: rgb(209, 233, 255) !important;
width: 100% !important;
margin: 0px !important;
padding: 0px !important;
position: relative !important;
height: auto !important;
}
.ajax__calendar_active {
background-color: rgb(200, 255, 0) !important;
border-radius: 3px;
}
.ajax__calendar_day {
height: 20px !important;
width: 20px !important;
padding: 0px;
text-align: center;
margin-top: -8px;
margin-left: -5px;
}
.ajax__calendar_body {
width: 270px !important;
height: 245px !important;
}
.ajax__calendar_container {
width: auto !important;
}
these styles can be customized any way you want.
I am using AjaxControlToolkit's ComboBox control. The DropDown arrow appears quite far from the actual position where it should be. See this image:
How to fix this to make it appear like an ideal DropDownList?
If the image doesn't appear, click this link: http://postimage.org/image/99yqullkb/
**** Edited (CSS Code) ****
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
margin: 0;
padding: 0px 0px 1px 0px;
border: solid 1px #7F9DB9;
border-right: 0px none;
font-size: 13px;
height: 18px;
width:200px;
}
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
padding: 0px 0px 10px 0px;
height: 21px;
width: 21px;
}
.WindowsStyle .ajax__combobox_itemlist
{
border-color: #7F9DB9;
}
Looks like a CSS styles side-effect. Check calculated styles for arrow button and it's container with some tool like FireBug or Developer Tools.
IAE try to apply the style rule below, maybe it fix the issue:
table.ajax__combobox_inputcontainer td
{
padding: 0 !important;
text-align: left !important;
}
table.ajax__combobox_inputcontainer td.ajax__combobox_buttoncontainer button
{
margin-left: 0 !important;
}
If you are using width property like width="20%" then this problem occurs. Avoid "%" in width property and try with exact width in pixels like width="200px".