How to cancel the blur effect of the HTML textbox when focus on it?
<input type='text' style="background-color:#33ccff; color:#AD8C08; border:1px solid #ffffff; "></input>
You have to use CSS on the input element on focus to eliminate that "blur" effect that you're talking about. Take a look at this JSFiddle for an example.
http://jsfiddle.net/qfr8eng1/1/
HTML:
<input type="text" id="noeffect" value="look at me!"/>
CSS:
#noeffect
{
background-color: #33ccff;
color: #AD8C08;
border: 1px solid #ffffff;
}
#noeffect:focus
{
outline: none;
}
try it......
.onfocus { background-color:#33ccff; color:#AD8C08; border:1px solid #ffffff; }
.onfocus:focus { background:none; }
<input type='text' class="onfocus"></input>
Related
I need to color a input border bottom when the input is not focus. This is my html code:
<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />
This is my css code:
.numero {
border-bottom-color: red;
}
But it doesn't work. Anyone can help?
The border is red in your example:
.numero {
border-bottom: 1px solid #F00;
}
<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />
Simply use the shorthand to add a style, size and color and it works.
Now, in order to remove this when it is focused:
.numero:not(:focus) {
border-bottom: 1px solid #F00;
}
<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />
We use the :not() functionality with the :focus to check if the element in question is not focused.
use this code
input.numero {
border-bottom-color:red;
}
Working Fiddle
Add some border style:
.numero{
border: 1px, solid;
border-bottom-color: red;
}
You should define the border thickness in the css.
You can write that like this
.numero {
border-bottom:1px solid red;
}
And on focus if you want another color you can like this
.numero:focus {
border-bottom:1px solid transparent;
}
You can change the value of transparent to any other color of your preference.
.numero {
border-bottom: 2px solid cyan;
}
<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />
for any query please comment. All the best
.numero {
border-bottom:1px solid red;
}
How can I use a div as radio button ?
I mean that :
you can select a div and then it is bordered blue
you can only select one of them
If you want a CSS Only solution, this is an excellent one :
.labl {
display : block;
width: 400px;
}
.labl > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
.labl > input + div{ /* DIV STYLES */
cursor:pointer;
border:2px solid transparent;
}
.labl > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
background-color: #ffd6bb;
border: 1px solid #ff6600;
}
<label class="labl">
<input type="radio" name="radioname" value="one_value" checked="checked"/>
<div>Small</div>
</label>
<label class="labl">
<input type="radio" name="radioname" value="another" />
<div>Small</div>
</label>
Inspired by this answer
Yes, you can use 'div' as radio button and will work as radio button groups. But for this you'll need Javascript. I've created a script for that using JQuery. Here is the source--
$('.radio-group .radio').click(function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
//alert(val);
$(this).parent().find('input').val(val);
});
.radio-group{
position: relative;
}
.radio{
display:inline-block;
width:15px;
height: 15px;
border-radius: 100%;
background-color:lightblue;
border: 2px solid lightblue;
cursor:pointer;
margin: 2px 0;
}
.radio.selected{
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Select an option (You will get it's value displayed in the text input field!)</h2>
<form method="post" action="send.php">
<div class="radio-group">
<div class='radio' data-value="One"></div>1
<div class='radio' data-value="Two"></div>2
<div class='radio' data-value="Three"></div>3
<br/>
<input type="text" id="radio-value" name="radio-value" />
</div>
</form>
This is a simple solution.
HTML
<div class="option first">1</div>
<div class="option second">2</div>
<div class="option third">3</div>
<div class="option fourth">4</div>
CSS
.option
{
background-color:red;
margin: 10px auto;
}
.option.active
{
border:1px solid blue;
}
Jquery
$(document).ready(
function()
{
$(".option").click(
function(event)
{
$(this).addClass("active").siblings().removeClass("active");
}
);
});
link
I'm trying to make my form input transparent and over lay it on top of my div. Basically I want the text field to be transparent to whatever is behind it. Any suggestions?
<head>
<style type="text/css">
.WRAPPER {
background-color: #000;
height: 575px;
width: 975px;
background-image: url(exit-gate/exit-gate-bg.png);
top: auto;
margin: -8px;
}
body {
background-color: #000;
}
</style>
<style type="text/css">
term {
background: transparent;
border: none;
}
</style>
</head>
<body>
<div id="WRAPPER">
<div class="term"><input name="email" type="text" id="email">
<form name="form1" method="post" action="insert_ac.php">
<input type="image" src="exit-gate/white-box-10.png" alt="{alternate text}" name="submit" value="submit">
</form>
</div>
</div>
</body>
</html>
</div>
Try:
#email {
background-color:rgba(0, 0, 0, 0);
color:white;
border: none;
outline:none;
height:30px;
transition:height 1s;
-webkit-transition:height 1s;
}
#email:focus {
height:50px;
font-size:16px;
}
DEMO here.
this looks ways too simple but it worked for me:
<input type="text" id="SI"/>
this is my input field, I gave it an ID(SI), then in my CSS:
#SI{
background-color:transparent;
}
added the transparency to the element with SI id; the background became visible.
Also worth noting, on macOS and iOS, in any browser, the "user agent stylesheet" will override textbox style. You can override this (including the ::focus glow) by adding !important.
#mybox {
background-color: transparent!important;
border-color: transparent!important;
outline: transparent!important;
}
<input type="text" id="mybox" value="Textbox" />
saying I want a transparent color is like having the parent's color so put the value of background-color as inherit.
for me this helped:
<input type="text" />
style:
input {
background-color:inherit;
}
<style type="text/css">
input {
background-color : white;
border-color: transparent;
}
</style>
<input type="text" />
I have a search box like below and i am using bootstrap to give a flexible layout. How can use a design like below and make sure i can get a stretchable search box.
You'd need a container to put your input box in, and put a front and end div to it. Depending on browser compatibility you might want to add a few more div's to make sure your input box is shown properly in browsers like IEX7/8 though.
So you'd have the following:
<form class="searchbox">
<input type="text" class="text" />
<input type="submit" class="submit" />
</form>
Accompanied by the following example CSS
form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }
Add your Html part like this
<div class="searchbox">
<input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>
css part, download a search box image and replace it with the name
.searchbox input.lightsearch {
background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #575757;
font-size: 11px;
height: 19px;
margin-top: 24px;
padding: 2px 5px 2px 24px;
width: 170px;
}
What's the easiest way to remove the border lines of a <fieldset>?
I mean a cross-browser solution... is that possible ?
fieldset {
border: 0;
}
fieldset {
border:0 none;
}
(In regards to Marko's comment)
As far as positioning/styling the <legend>, I hide the <legend> (still put one in there just to be semantic), and position/style an <h2> instead. I find this setup gives me nice styling options for my fieldsets.
JSFiddle Link: http://jsfiddle.net/axYQs/
fieldset {
border: 2px solid gray;
padding: 1em;
float: left;
font-family: Arial;
}
legend {
display: none;
}
h2 {
border-bottom: 2px solid gray;
margin: 1em 0;
}
p {
margin: 1em 0;
}
<fieldset>
<legend>Enter Name</legend>
<h2>Enter Name</h2>
<p>
<label for="name">Name:</label>
<br />
<input type="text" name="firstname" id="name"/>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</fieldset>
Here is a quick easy effective way to style it..
assign a class or id to the fieldset element then style it in css.
<fieldset class="fieldset">
or
<fieldset id="fieldset">
css.fieldset {
border: none;
}
or
fieldset {
border: none;
}