I want to hide circle button in paper-radio and replace that with a custom div which displays circle with number.
I tried below code,but it hides all contents
.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
paper-radio-button{
visibility: hidden; /* hides circle button but also hides content inside radio button tag**/
}
<paper-radio-button checked>
<div class="numberCircle">2</div>
</paper-radio-button>
I tried these codes
Plunker:https://plnkr.co/edit/kzCDugV8O2H5Z0eKMLZS?p=preview
I've been trying the same for a time. However, did not find any way to do it. You could work around with the exposed mixins (--paper-radio-button-unchecked-color and --paper-radio-button-checked-color) by setting the colour the same as the background, but it would not work if the selected style would be a different colour.
Related
I am working on an old website for a client and I have run into a problem creating a button link. I considered creating a box with text in it, but I cannot produce text in the graphic that is as clear as the text generated in html. I have, therefore, created two boxes with blank space to accommodate the text. The text is superimposed over the box. The relevant code follows here.
.style1 {
font-size: 14px;
font-weight: bold;
}
.container {
position: relative;
text-align: center;
color: white;
font-weight: bold;
line-height: 100%;
}
.container:hover {
color: #000000;
}
.centered {
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: white;
}
.initials {
font-size: 16px;
}
.card {
width: 170px;
height: 100px;
background: url("otec_link.png") no-repeat;
display: inline-block;
}
.card:hover {
background: url("otec_link_gray.png") no-repeat;
color: black;
text-decoration: none;
}
.words {
color: #FFFFFF;
text-decoration: none;
}
.words:hover {
color: #000000;
text-decoration: none;
}
<div class="container">
<div>
<div class="centered" style="text-align:left;">
<span class="initials">O</span>nline<br><span class="initials">T</span>eacher<br><span class="initials">E</span>ducation<br><span class="initials">C</span>enter</div>
<span class="card"></span>
</div>
</div>
You can run the code to see the issues.
Here is what I am looking for:
A red box with white text.
On mouseover, a gray box with black text with anchor link available text and graphic.
Here is what I am getting:
A red box with white text.
On mousover the box, a gray box with white text, and when the pointer passes over the text it turns black and the red box returns.
There is a gap in the anchor link between the lines of text.
I have tried to create what is basically two links, one for the box and the other for the text to get around the font quality issue.
The website is comechildrensing.com. You can go there to see the issue in context. It is the top button in the vertical red menu bar on the left. If there is a tool I can use to make clean, sharp text in the graphics, it would make the whole mess go away. Otherwise, I am open to any solution that will resolve the problems.
Right now you've created three different hovers for three different elements that the user can hover over (pretty much) individually. It's better to do one hover and have it target other elements instead.
.container:hover .card {
background: url("otec_link_gray.png") no-repeat;
}
.container:hover .words {
color: black;
text-decoration: none;
}
For some reason I can't style submit form buttons the way I want.
Here's how they look right now.
This code works for normal buttons but not on form submit buttons.
#sprint1, #sprint2, #sprint3, #sprint4, #sprint5 {
width: 13%;
height: 40px;
display: inline-block;
vertical-align: top;
font-family: Verdana, "Helvetica", sans-serif;
font-size:small;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #07526e;
padding-top: 2px;
margin-left: auto;
margin-right: auto;
left: 16%;
margin-top: 2%;
position: relative;
cursor: pointer;
border: none;
background-color: #467;
border-radius: 5px;
}
As you can see the gray textboxes look hideous over the blue backgrounds.
I simply cannot go for button tags, which I have no trouble styling at all. But I have to stick with form submit buttons because they trigger a PHP function that I can't get normal buttons to do.
How do I rid these gray boxes and have the text over the blue buttons instead? Thanks very much!
Here's my fiddle
input[type=submit] {
background-color:transparent;
border:none;
}
This is how you apply styling to inputs. In your fiddle, you only applied styles to the <form>
edit
My example above makes the button transparent. My actual advice would be to apply the form's styling to the input to make the input blue without border, etc.
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>
I basically want to create a button like the big "Download Bootstrap" button on this side: http://getbootstrap.com/
Note: I want to create the button myself just with css & html and not with the twitter-bootstrap framework
I was able to do it pretty well but then I noticed that there was a bug: http://jsfiddle.net/vk5DV/
If you zoom in while hovering over the button you will notice that in the corner of the button there is something wrong. I think the link itself gets styled with the white background but I have no idea why.
#googlink a {
color: white;
transition: all 0.2s linear 0s;
}
#googlink :hover {
background-color: white !important;
color: #99CC00;
}
why does the link get a white background too (and not only the button div)?
If a border-radius is added it seems ok
eg
#googlink :hover {
background-color: white !important;
border-radius: 6px;
color: #99CC00;
}
http://jsfiddle.net/f3kzb/show/
Although if you simplify it a bit, i think it works fine with the code you already have. Also specified as a class to be used with any link.
http://jsfiddle.net/fe25t/
html
<div id="green">
Google
</div>
css
body {
margin: 0;
padding: 0;
}
#green {
background-color: #99CC00;
}
a {
text-decoration: none;
color: black;
}
.special-link {
border-radius: 10px;
margin: 40px;
display: inline-flex;
height: auto;
width: auto;
font-size: 65px;
background-color: #99CC00;
border: 2px solid white;
color: white;
transition: all 0.2s linear 0s;
}
.special-link:hover {
background-color: white !important;
color: #99CC00;
}
Do not use a div, just style the link (a).
Currently you are styling both the link and the div, which is not necessary - this creates conflicts and, semantically, is useless.
You would want to use a div only if you needed to nest multiple elements within it and then position the div to position all the elements at once (just an example).
There you go.. check this out.. The hover border has to be round so that it does not overlap the normal border. This addition is under the hood of the main button border so it does not pop out at the corners.
#googlink :hover {
border-radius: 6px;
background-color: white !important;
color: #99CC00;
}
http://jsfiddle.net/47vDq/
I want to align the checkbox, label and text input in a same line using css. I can do it by using the default template of the browser.
However I really liked the simple theme given in this link. The theme has label and a input text. I wanted to add a checkbox as well at the beginning of the line. Somehow adding a checkbox inside the div makes the arrangement awry.
Though its better to look at the code in the link, I am providing a snapshot here:
HTML
<form>
<div>
<!--NEED TO ADD CHECKBOX HERE -->
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
</form>
CSS3
/* Onto the styling now. Some quick generic styles first. */
html, body {
width: 100%; height: 100%;
}
body {
font-size: 76%;
font-family: Verdana;
background: #eee;
padding: 50px 0;
}
form {
background: #fafafa;
padding: 20px;
width: 400px;
margin: 0 auto;
border: 1px solid #ffe2e3;
}
form div {
/* Float containment */
overflow: hidden;
}
/* Things are looking good now, onto the main input field
styling now! */
/*
Lets change the box model to make the label and input
contain into the 100% div.
You might want to specify the box sizing properties inside
`* {}` at the top.
Things are looking great now! Lets just spice it up a bit.
*/
form label, form input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form label {
font-weight: bold;
background: linear-gradient(#f1f1f1, #e2e2e2);
padding: 5px 10px;
color: #444;
border: 1px solid #d4d4d4;
/* lets remove the right border */
border-right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 1.5em;
width: 30%;
/* takes the width properly now and also the
spacing between the label and input field got removed. */
float: left;
text-align: center;
cursor: pointer;
}
/* The label is looking good now. Onto the input field! */
/*
Everything is broken now! But we can fix it. Lets see how.
*/
form input {
width: 70%;
padding: 5px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 5px;
border-top-right-radius: 4px;
line-height: 1.5em;
float: right;
/* some box shadow sauce :D */
box-shadow: inset 0px 2px 2px #ececec;
}
form input:focus {
/* No outline on focus */
outline: 0;
/* a darker border ? */
border: 1px solid #bbb;
}
/* Super! */
p.s: It will be delightful if someone can stylize the checkbox in the same way as the example
try this one,
form input[type="checkbox"] {
width:20px;
}
<div>
<input type="checkbox" >
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
http://jsfiddle.net/KW6AY/1/
Here you go \w quick styling:
http://codepen.io/daniesy/pen/puema
alter the css to input[type="text"] and lower the width to around 60% (so it won't affect your checkbox), add a checkbox with a float left
just rename class
form input into form input[type="text"]
Good luck.