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?

enter image description 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;

edited Nov 13 '18 at 0:28

Temani Afif

78.5k94590

asked Nov 12 '18 at 23:47

Gene9y

2331315

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?

enter image description 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;

edited Nov 13 '18 at 0:28

Temani Afif

78.5k94590

asked Nov 12 '18 at 23:47

Gene9y

2331315

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?

enter image description 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;

edited Nov 13 '18 at 0:28

Temani Afif

78.5k94590

asked Nov 12 '18 at 23:47

Gene9y

2331315

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?

enter image description 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

edited Nov 13 '18 at 0:28

Temani Afif

78.5k94590

asked Nov 12 '18 at 23:47

Gene9y

2331315

edited Nov 13 '18 at 0:28

Temani Afif

78.5k94590

asked Nov 12 '18 at 23:47

Gene9y

2331315

edited Nov 13 '18 at 0:28

Temani Afif

78.5k94590

edited Nov 13 '18 at 0:28

Temani Afif

78.5k94590

edited Nov 13 '18 at 0:28

Temani Afif

78.5k94590

asked Nov 12 '18 at 23:47

Gene9y

2331315

asked Nov 12 '18 at 23:47

Gene9y

2331315

asked Nov 12 '18 at 23:47

Gene9y

2331315

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

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 |

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,3751312

add a comment |

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

<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,3751312

add a comment |

<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,3751312

add a comment |

<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,3751312

<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,3751312

answered Nov 13 '18 at 1:16

MichaelvE

1,3751312

answered Nov 13 '18 at 1:16

MichaelvE

1,3751312

answered Nov 13 '18 at 1:16

MichaelvE

1,3751312

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Dfyjkt