Remove the input highlighted box on click [duplicate]
This question already has an answer here:
Remove default focus outline and change to different color [duplicate]
1 answer
I tried to remove the highlighted blue box in the following picture on clicking the input. It is not working. What's wrong here?
<link href="css/bootstrap-v3.5.5.min.css" rel="stylesheet" type="text/css">
<input type="text" class="form-control" placeholder="Enter here" readonly>
In css,
.form-control:focus {
outline: none;
}
css twitter-bootstrap input twitter-bootstrap-3 border
edited Nov 13 '18 at 0:28
Temani Afif
65.5k93776
asked Nov 12 '18 at 23:47
Gene9y
2131214
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 8:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
Remove default focus outline and change to different color [duplicate]
1 answer
I tried to remove the highlighted blue box in the following picture on clicking the input. It is not working. What's wrong here?
<link href="css/bootstrap-v3.5.5.min.css" rel="stylesheet" type="text/css">
<input type="text" class="form-control" placeholder="Enter here" readonly>
In css,
.form-control:focus {
outline: none;
}
css twitter-bootstrap input twitter-bootstrap-3 border
edited Nov 13 '18 at 0:28
Temani Afif
65.5k93776
asked Nov 12 '18 at 23:47
Gene9y
2131214
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 8:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
if it's bootstrap, add the relevant tag
– Temani Afif
Nov 12 '18 at 23:57
Here it is. Missed the coding tag.
– Gene9y
Nov 13 '18 at 0:12
I meant if it's bootstrap, add the bootstrap tag with the version
– Temani Afif
Nov 13 '18 at 0:24
Yep, it is added.
– Gene9y
Nov 13 '18 at 0:27
Yes, it is working now.
– Gene9y
Nov 13 '18 at 2:03
add a comment |
This question already has an answer here:
Remove default focus outline and change to different color [duplicate]
1 answer
I tried to remove the highlighted blue box in the following picture on clicking the input. It is not working. What's wrong here?
<link href="css/bootstrap-v3.5.5.min.css" rel="stylesheet" type="text/css">
<input type="text" class="form-control" placeholder="Enter here" readonly>
In css,
.form-control:focus {
outline: none;
}
css twitter-bootstrap input twitter-bootstrap-3 border
edited Nov 13 '18 at 0:28
Temani Afif
65.5k93776
asked Nov 12 '18 at 23:47
Gene9y
2131214
This question already has an answer here:
Remove default focus outline and change to different color [duplicate]
1 answer
I tried to remove the highlighted blue box in the following picture on clicking the input. It is not working. What's wrong here?
<link href="css/bootstrap-v3.5.5.min.css" rel="stylesheet" type="text/css">
<input type="text" class="form-control" placeholder="Enter here" readonly>
In css,
.form-control:focus {
outline: none;
}
This question already has an answer here:
Remove default focus outline and change to different color [duplicate]
1 answer
css twitter-bootstrap input twitter-bootstrap-3 border
css twitter-bootstrap input twitter-bootstrap-3 border
edited Nov 13 '18 at 0:28
Temani Afif
65.5k93776
asked Nov 12 '18 at 23:47
Gene9y
2131214
edited Nov 13 '18 at 0:28
Temani Afif
65.5k93776
asked Nov 12 '18 at 23:47
Gene9y
2131214
edited Nov 13 '18 at 0:28
Temani Afif
65.5k93776
edited Nov 13 '18 at 0:28
Temani Afif
65.5k93776
edited Nov 13 '18 at 0:28
Temani Afif
65.5k93776
65.5k93776
asked Nov 12 '18 at 23:47
Gene9y
2131214
asked Nov 12 '18 at 23:47
Gene9y
2131214
asked Nov 12 '18 at 23:47
Gene9y
2131214
2131214
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 8:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 8:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
if it's bootstrap, add the relevant tag
– Temani Afif
Nov 12 '18 at 23:57
Here it is. Missed the coding tag.
– Gene9y
Nov 13 '18 at 0:12
I meant if it's bootstrap, add the bootstrap tag with the version
– Temani Afif
Nov 13 '18 at 0:24
Yep, it is added.
– Gene9y
Nov 13 '18 at 0:27
Yes, it is working now.
– Gene9y
Nov 13 '18 at 2:03
add a comment |
if it's bootstrap, add the relevant tag
– Temani Afif
Nov 12 '18 at 23:57
Here it is. Missed the coding tag.
– Gene9y
Nov 13 '18 at 0:12
I meant if it's bootstrap, add the bootstrap tag with the version
– Temani Afif
Nov 13 '18 at 0:24
Yep, it is added.
– Gene9y
Nov 13 '18 at 0:27
Yes, it is working now.
– Gene9y
Nov 13 '18 at 2:03
if it's bootstrap, add the relevant tag
– Temani Afif
Nov 12 '18 at 23:57
if it's bootstrap, add the relevant tag
– Temani Afif
Nov 12 '18 at 23:57
Here it is. Missed the coding tag.
– Gene9y
Nov 13 '18 at 0:12
Here it is. Missed the coding tag.
– Gene9y
Nov 13 '18 at 0:12
I meant if it's bootstrap, add the bootstrap tag with the version
– Temani Afif
Nov 13 '18 at 0:24
I meant if it's bootstrap, add the bootstrap tag with the version
– Temani Afif
Nov 13 '18 at 0:24
Yep, it is added.
– Gene9y
Nov 13 '18 at 0:27
Yep, it is added.
– Gene9y
Nov 13 '18 at 0:27
Yes, it is working now.
– Gene9y
Nov 13 '18 at 2:03
Yes, it is working now.
– Gene9y
Nov 13 '18 at 2:03
add a comment |
1 Answer
1
active
oldest
votes
First, ensure that your style comes after your Bootstrap styles so that it overwrites them. The box-shadow is set to none. Not sure if you also wanted the blue border to be removed on focus, so I've changed that too.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-control:focus {
box-shadow: none;
border: 1px solid #ccc;
}
</style>
<input type="text" class="form-control" placeholder="Enter here">answered Nov 13 '18 at 1:16
MichaelvE
1,1531310
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
First, ensure that your style comes after your Bootstrap styles so that it overwrites them. The box-shadow is set to none. Not sure if you also wanted the blue border to be removed on focus, so I've changed that too.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-control:focus {
box-shadow: none;
border: 1px solid #ccc;
}
</style>
<input type="text" class="form-control" placeholder="Enter here">answered Nov 13 '18 at 1:16
MichaelvE
1,1531310
add a comment |
First, ensure that your style comes after your Bootstrap styles so that it overwrites them. The box-shadow is set to none. Not sure if you also wanted the blue border to be removed on focus, so I've changed that too.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-control:focus {
box-shadow: none;
border: 1px solid #ccc;
}
</style>
<input type="text" class="form-control" placeholder="Enter here">answered Nov 13 '18 at 1:16
MichaelvE
1,1531310
add a comment |
First, ensure that your style comes after your Bootstrap styles so that it overwrites them. The box-shadow is set to none. Not sure if you also wanted the blue border to be removed on focus, so I've changed that too.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-control:focus {
box-shadow: none;
border: 1px solid #ccc;
}
</style>
<input type="text" class="form-control" placeholder="Enter here">answered Nov 13 '18 at 1:16
MichaelvE
1,1531310
First, ensure that your style comes after your Bootstrap styles so that it overwrites them. The box-shadow is set to none. Not sure if you also wanted the blue border to be removed on focus, so I've changed that too.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-control:focus {
box-shadow: none;
border: 1px solid #ccc;
}
</style>
<input type="text" class="form-control" placeholder="Enter here"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-control:focus {
box-shadow: none;
border: 1px solid #ccc;
}
</style>
<input type="text" class="form-control" placeholder="Enter here"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-control:focus {
box-shadow: none;
border: 1px solid #ccc;
}
</style>
<input type="text" class="form-control" placeholder="Enter here">answered Nov 13 '18 at 1:16
MichaelvE
1,1531310
answered Nov 13 '18 at 1:16
MichaelvE
1,1531310
answered Nov 13 '18 at 1:16
MichaelvE
1,1531310
answered Nov 13 '18 at 1:16
MichaelvE
1,1531310
1,1531310
add a comment |
add a comment |
if it's bootstrap, add the relevant tag
– Temani Afif
Nov 12 '18 at 23:57
Here it is. Missed the coding tag.
– Gene9y
Nov 13 '18 at 0:12
I meant if it's bootstrap, add the bootstrap tag with the version
– Temani Afif
Nov 13 '18 at 0:24
Yep, it is added.
– Gene9y
Nov 13 '18 at 0:27
Yes, it is working now.
– Gene9y
Nov 13 '18 at 2:03