Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have a little CSS issue right here. I'm creating a simple button and I have the desired effect and all; but the button doesn't stop and acts like width:100% while I have width set to auto. I have put my code below and the effect is currently has.
>> CURRENT OUTCOME
a.abutton {
display:block;
background-color: #49b4df;
background-image: -webkit-linear-gradient(#49b4df, #2497c5);
background-image: -moz-linear-gradient(#49b4df, #2497c5);
background-image: -o-linear-gradient(#49b4df, #2497c5);
background-image: linear-gradient(#49b4df, #2497c5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#49B4DF', EndColorStr='#2497C5');
width: auto;
height: 31px;
color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 0px 0px 0px 0px;
padding: 2px 5px 5px 5px;
border: 0px none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-moz-box-shadow: 1px 1px 2px #919191;
-webkit-box-shadow: 1px 1px 2px #919191;
box-shadow: 1px 1px 2px #919191;
}
Question: How do I stop the button from expanding and stop where the text also stops?
Try to change
display: block;
by
display: inline-block;
"width:auto" inherit the parent "width" with a "display: block."
You need to change the display to inline-block
Related
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 5 years ago.
Improve this question
How to style Google custom search engine using css
Help me,
Thanks in advance.
<div class="messagepop pop">
<script> //Google Custom Search Engine Code
</script>
<gcse:search> </gcse:search>
</div>
.messagepop input{
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
outline:0;
height:55px;
padding: 5px;
}
.messagepop input{box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.34),
-15px -14px 0px rgba(255, 255, 255, 1),
18px -55px 0px rgba(255, 255, 255,1),
33px -6px 0px rgba(255, 255, 255, 1); }
.messagepop input:last-child{ background: #32c77f;
line-height: 50px; height: 35px; width: 80px; margin-top: 28px; }
Ok, so I wish to create something like http://i.imgur.com/jox0ENW.jpg. But be of a modular type, where I might have a button class that'll make it look like that, and a class I can use to apply to sections.
Right now I have:
.double-drop {
position: relative;
padding: map-get($padding, xl);
margin-top: (-1 * 280px);
border: 3px solid $black;
background-color: $white;
&:before {
content: '';
position: absolute;
z-index: -1;
top: (-1 * map-get($padding, m));
right: (-1 * map-get($padding, m));
width: 100%;
height: 100%;
border: 3px solid $black;
background-color: $lighter-grey;
}
}
Which works, and creates that effect on sections. But not if the section is inside a parent which is absolutely positioned. (the drop shadow goes behind..)
I would like to imitate that effect in the image, for all my buttons, and obviously transition its translate so it moves or what not.
Would it be possible first of all?
Multiple Borders on CSS Only Button
Perhaps using multiple shadows as borders would be a simple solution? It degrades gracefully in browsers that don't support it, and it's easy to work with.
JSFiddle Example
.shadow-button {
padding:10px;
border:solid 3px #000000;
display:inline-block; /* used only to shrink wrap the div around the contents, has a default margin */
-webkit-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
-moz-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
font-family:Verdana, Tahoma, Arial, sans-serif;
font-weight:bold;
}
p {padding:10px;}
<div class="shadow-button">PLAY MUSIC VIDEO</div>
Browser Support: http://caniuse.com/#search=box
I'm creating a toplist of users where I use CSS3 border to create a white-border for the ranking number. Its viewable here: http://www.cphrecmedia.dk/musikdk/stage/channelfans.php
However it seems theres a black border after the border, which I find very very strange. It seems its spill from the background-color.
Its a very minor issue, but I'm very interested in why this actual happens. Does anyone know why? The CSS is very very simple, so it shouldn't happen
To prevent this leak outside border, you need to declare a background-clip property with padding-box. This shall resolve your issue.
The Code change:
#tf span h6 {
background: #333333;
border: 4px solid #F9F9F9;
border-radius: 99px;
color: white;
font: 700 30px/80px arial, sans-serif;
margin-left: -26px;
padding: 5px 13px;
/* The important part to remove the overflow/leak: */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
Hope this helps.
Looks like it is a spill issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=24998
You can add this
box-shadow: 0px 0px 2pt 2pt black;
inside your
#tf span h6 {
}
in .css file
like:
#tf span h6 {
border-radius: 99px;
background: #333333;
color: white;
font: 700 30px/80px arial, sans-serif;
padding: 5px 13px;
border: 4px solid #F9F9F9;
margin-left: -22px;
box-shadow: 0px 0px 2pt 2pt black;
}
it will generate black shadow to your rounded box, so more or less it will become attractive and removes that box kind of issue.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
There has been some controversy regarding the practice of doing the following:
a, input, textarea, button {
outline: none;
}
Accessibility issues are a common concern.
It is not my intention to remove this feature altogether (as the code above does); however, this feature greatly messes with my original design by adding unintended borders (erm, outlines?) in unwelcome areas.
The main problem is that these outlines actually follow the rectangular area around the element, not its contour (i.e. it ignores border radius, etc.).
Example:
div {
margin: 64px;
}
input {
font-size: 20px;
border-radius: 16px;
border: 2px solid #CCC;
padding: 2px 12px;
}
button {
font-size: 20px;
border-radius: 32px;
text-transform: uppercase;
color: #FFF;
border: 2px solid #CCC;
background: #CCC;
padding: 6px 3px;
cursor: pointer;
}
<div>
<input type="text" placemark="Search query..."/>
<button>Go</button>
</div>
The only solution of which I am aware is to have the above code running and employ my own system.
What are the best practices when taking this approach?
Indeed. An outline is around the rectangular area on the outside of the border. It doesn't take rounded corners into account.
There's nothing wrong with disabling the outline, just make sure you add some other accessibility feature for people using the keyboard, for instance, change the color of your background on focus:
div {
margin: 64px;
}
input {
font-size: 20px;
border-radius: 16px;
border: 2px solid #CCC;
padding: 2px 12px;
outline: 0;
}
button {
font-size: 20px;
border-radius: 32px;
text-transform: uppercase;
color: #FFF;
border: 2px solid #CCC;
background: #CCC;
padding: 6px 3px;
cursor: pointer;
}
input:focus {
border-color: #999;
}
<div>
<input type="text" placemark="Search query..."/>
<button>Go</button>
</div>
As many form elements, the button element has different renderings in browsers, and as many fixes are needed...
http://fvsch.com/code/button-css/ from F. Verschelde should let you outline buttons around the whole element and not around its content.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am trying to code a design into HTML and CSS. It is a small snippet. I am having issues with the positioning and cant seem to put elements in their correct places.
My webpage can be found at http://www.sarahjanetrading.com/js/j/index.html
The design that I want to copy can be found here: http://www.sarahjanetrading.com/js/j/people-list.png
I also want the checkbox input to look like the one in the design. Can checkboxes be styled?
Change Your CSS like this :
#people-list #content h2 {
font-size: 16px;
float: left;
margin-left: 10px;
margin-top: 5px;
width: 355px;
}
#people-list #content small {
font-size: 12px;
color: #8F9092;
margin: 5px 0 8px;
display: block;
float: left;
width: 355px;
display: block;
margin-left: 9px;
}
#people-list #content .tags {
border-radius: 7px;
box-shadow: inset 0px 6px 2px 8px #f5f5f5;
border: 1px solid #E3E3E3;
padding: 2px;
font-size: 9px;
margin-right: 3px;
margin-left: 10px;
}
and Check this link for styling checkbox
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
yes ,checkbox can be styled, try to put the buttons in a div and change the display attribute to inline